I have a simple input slider and I'd like to display the value the slider is currently on below it.
I thought I had this working with the following script but it broke everything else on the page that uses Javascript.
$(document).ready(function(){
var slider = document.getElementById("deposit-input");
var output = document.getElementById("deposit-value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});
What's wrong with this or is there a better/easier way of displaying the value on the page?
Thanks in advance!
/* ==========================================================================
#NAVIGATION
========================================================================== */
/*
* Creates classes to enable responsive navigation.
*/
// Wait for the DOM to be ready (all elements printed on page regardless if
// loaded or not).
$(function() {
// Bind a click event to anything with the class "toggle-nav".
$('.page-head__toggle').click(function() {
if ($('body').hasClass('show-nav')) {
$('body').removeClass('show-nav').addClass('hide-nav');
setTimeout(function() {
$('body').removeClass('hide-nav');
}, 800);
} else {
$('body').removeClass('hide-nav').addClass('show-nav');
}
// Deactivate the default behavior of going to the next page on click.
return false;
});
});
/*
* Sliding Line.
*/
$(function() {
var $el,
leftPos,
newWidth,
$mainNav = $(".site-nav__list");
$mainNav.append("<div class='site-nav__line'></div>");
var $magicLine = $(".site-nav__line"),
$currentMenu = $(".current-menu-item");
$magicLine
.width($currentMenu.length ? $currentMenu.width() : 0)
.css("left", $currentMenu.length ? $currentMenu.find("a").position().left : 0)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
var hoverOut;
$(".site-nav__list li a").hover(function() {
clearTimeout(hoverOut);
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
if (!$magicLine.width()) {
$magicLine.stop().hide().css({
left: leftPos,
width: newWidth
}).fadeIn(100);
} else {
$magicLine.stop().animate({
opacity: 1,
left: leftPos,
width: newWidth
});
}
},
function() {
hoverOut = setTimeout(function() {
if (!$currentMenu.length) {
$magicLine.fadeOut(100, function() {
$magicLine.css({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
} else {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
}
}, 100);
}
);
});
/* ==========================================================================
#Simple Accordion
========================================================================== */
$('.accordion').find('.accordion__title').click(function(){
$(this).toggleClass('open');
$(this).next().slideToggle('fast');
});
/* ==========================================================================
#INPUT SLIDER
========================================================================== */
/*
* Simple version. This code just uses the `<input type="range" />` element and
* displays the value on the page.
*/
$(document).ready(function(){
var slider = document.getElementById("deposit-input");
var output = document.getElementById("deposit-value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});
/* ==========================================================================
#SLICK
========================================================================== */
/*
* Creates classes to enable responsive navigation.
*/
$(document).ready(function(){
$('.slick-slider').slick({
adaptiveHeight: true,
arrows: false,
dots: true,
infinite: false,
fade: true,
cssEase: 'ease-out',
speed: 300
});
});
/*
* Creates classes to enable responsive navigation.
*/
$(document).ready(function(){
$('.slick-carousel').slick({
centerMode: true,
centerPadding: '0',
slidesToShow: 3,
arrows: false,
dots: true,
responsive: [
{
breakpoint: 960,
settings: {
centerMode: true,
centerPadding: '120px',
slidesToShow: 1
}
},
{
breakpoint: 600,
settings: {
centerMode: true,
centerPadding: '60px',
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
centerMode: true,
centerPadding: '30px',
slidesToShow: 1
}
}
]
});
});
/*
* Slideshow form (for apply page)
*/
$(document).ready(function(){
$('.slick-form').slick({
adaptiveHeight: true,
arrows: true,
appendArrows: $('.slick-form-arrows'),
prevArrow: '<span class="btn">Go Back</span>',
nextArrow: '<span class="btn">Next Slide</span>',
dots: false,
infinite: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="label form-group__title">Slider (browser) <span class="required">*</span></label>
<div class="form-group__controls">
<div class="slider align-center">
<input type="range" min="0" max="100" value="50" class="slider__input" id="deposit-input" />
<p class="slider__value">Amount: <strong>£<span id="deposit-value"></span></strong></p>
</div>
</div>
</div>
Related
currently my slider shows total slide count as number of dots, I also want to show current active dot number, currently it is showing number of active slide
here is my code
var $status = $('.sliderQty');
var $slickElement = $('.myslider');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide,
nextSlide) {
if(!slick.$dots){
return;
}
// --------- this i value is current slide. i need that to be current active dot
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text(i + '/' + (slick.$dots[0].children.length));
});
$('.myslider').slick({
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
centerPadding: '20px',
adaptiveHeight: true,
autoplay: false,
infinite: false,
speed: 500,
autoplaySpeed: 5000,
prevArrow: $('.qtyPrevBtn'),
nextArrow: $('.qtyNextBtn')
});
any possible solutions?
Maybe you can simply grab the active dot text:
$('.slick-dots .slick-active').text();
const $status = $('.sliderQty');
const $slickElement = $('.myslider');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide,
nextSlide) {
if(!slick.$dots){
return;
}
setTimeout(function() {
let t = $('.slick-dots .slick-active button').attr('aria-label');
$status.text(t.replace('of','/'));
},10)
});
$slickElement.slick({
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
centerPadding: '20px',
adaptiveHeight: true,
autoplay: false,
infinite: false,
speed: 500,
autoplaySpeed: 5000,
prevArrow: $('.qtyPrevBtn'),
nextArrow: $('.qtyNextBtn')
});
.slide {
background: #f1f1f1;
line-height: 150px;
text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="myslider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
<div class="slide">9</div>
<div class="slide">10</div>
</div>
<div class="sliderQty"></div>
i figured it out on myown. found a better solution
var $status = $('.sliderQty');
var $slickElement = $('.myslider');
$slickElement.on('init reInit afterChange', function (event, slick,
currentSlide,
nextSlide) {
if(!slick.$dots){
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
var slidesToShow = slick.slickGetOption('slidesToShow');
var curPage = parseInt((i-1)/slidesToShow) + 1;
var lastPage = parseInt((slick.slideCount-1)/slidesToShow) + 1;
$('.currentSlide').text(curPage);
$('.lastSlide').text(lastPage);
});
$('.myslider').slick({
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
centerPadding: '20px',
adaptiveHeight: true,
autoplay: false,
infinite: false,
speed: 500,
autoplaySpeed: 5000,
prevArrow: $('.qtyPrevBtn'),
nextArrow: $('.qtyNextBtn')
});
I can't get this to work. I need to separate the OWL carousel script into 2 lose items.
(It won't work when I use the "function owlInitialize()" two times)
The reason is that I made a PageBuilder and need to add the whole script per added carousel item.
This is the script which does work but it needs to be separated:
I also rather have a different $(window).width() for each one.
function owlInitialize() {
if ($(window).width() < 860) {
$('.over-slider').addClass("owl-carousel");
$('.owl-carousel').owlCarousel({
loop:false,
margin: 30,
dots: true,
responsive:{
0:{
items:1,
},
680:{
items:2,
}
}
});
$('.diensten-slider').addClass("owl-carousel");
$('.owl-carousel').owlCarousel({
loop:false,
dots: true,
margin: 30,
responsive:{
0:{
items:1,
},
680:{
items:2,
}
}
});
}
else{
$('.over-slider.owl-carousel').owlCarousel('destroy');
$('.over-slider').removeClass("owl-carousel");
$('.diensten-slider.owl-carousel').owlCarousel('destroy');
$('.diensten-slider').removeClass("owl-carousel");
}
}
$(document).ready(function(e) {
owlInitialize();
});
$(window).resize(function() {
owlInitialize();
});
https://jsfiddle.net/fourroses666/wb7pmfqo/9/
Solution:
https://jsfiddle.net/fourroses666/wb7pmfqo/11/
function owlInitialize() {
if ($(window).width() < 860) {
$('.over-slider').addClass("owl-carousel");
$('.owl-carousel').owlCarousel({
loop:false,
margin: 30,
dots: true,
responsive:{
0:{
items:1,
},
680:{
items:2,
}
}
});
}
else{
$('.over-slider.owl-carousel').owlCarousel('destroy');
$('.over-slider').removeClass("owl-carousel");
}
}
$(document).ready(function(e) {
owlInitialize();
});
$(window).resize(function() {
owlInitialize();
});
// over + diensten slider
function owlInitialize2() {
if ($(window).width() < 860) {
$('.diensten-slider').addClass("owl-carousel");
$('.owl-carousel').owlCarousel({
loop:false,
dots: true,
margin: 30,
responsive:{
0:{
items:1,
},
680:{
items:2,
}
}
});
}
else{
$('.diensten-slider.owl-carousel').owlCarousel('destroy');
$('.diensten-slider').removeClass("owl-carousel");
}
}
$(document).ready(function(e) {
owlInitialize2();
});
$(window).resize(function() {
owlInitialize2();
});
I'm using Slick.js to show slides on my page. It is working as expected however I am trying to add a slider counter to the bottom of the slider that would show 1/4 if the fist slide is shown, 2/4 if the second slide is shown, etc. I have tried to use dotsClass: 'custom_paging' function however this shows 1 of 4, 2 of 4 as a list rather than just 1/4 or 2/4 , etc depending on the slide that is shown.
Code:
$(document).ready(function () {
$('.project-carousel').slick({
centerMode: true,
infinite: true,
centerPadding: '40px',
slidesToShow: 3,
dots: true,
dotsClass: 'custom_paging',
customPaging: function (slider, i) {
var slideNumber = (i + 1),
totalSlides = slider.slideCount;
return slideNumber + ' of ' + totalSlides;
},
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.slick-slider').on('click', '.slick-slide', function (e) {
e.stopPropagation();
var index = $(this).data("slick-index");
if ($('.slick-slider').slick('slickCurrentSlide') !== index) {
$('.slick-slider').slick('slickGoTo', index);
}
});
});
DEMO FIDDLE
Actually I have found the solution to this and its below adding the below code:
var $status = $('.counter-info');
var $slickElement = $('.project-carousel');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = (currentSlide ? currentSlide : 0) + 1;
$status.html( '<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>');
});
DEMO:
I'm trying to launch an event when Slick.js breakpoint gets triggered.
The init event gets triggered even if the breakpoint is not hit.
Is there a way around it?
Here is my code:
var $j = jQuery.noConflict();
$j(".homepage_slider").slick({
dots: false,
infinite: true,
arrows:false,
autoplay:true,
autoplaySpeed:3500,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 480,
settings: {
init: changeImages()
}
}
]
});
function changeImages(){
$j('img.slider-image').each(function() {
$j(this).attr('src', $j(this).attr('data-mobile'));
});
}
I also tried this but it didn't work:
$j('.homepage_slider').on('breakpoint', function(){
console.log("test");
$j('img.slider-image').each(function() {
$j(this).attr('src', $j(this).attr('data-mobile'));
});
});
Any ideas?
UPDATE:
Found this post: how to call different jquery actions in responsive design
var isBreakPoint = function (bp) {
var bps = [320, 480, 768, 1024],
w = $j(window).width(),
min, max
for (var i = 0, l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-1] || 0
max = bps[i]
break
}
}
return w > min && w <= max
}
if (isBreakPoint(480)) {
$j('img.slider-image').each(function() {
$j(this).attr('src', $j(this).attr('data-mobile'));
});
}
This workaround works, but would be nice if I found one that works whenever Slick.js breakpoint event is hit so there is no discrepancy between two methods.
Look at the «Events» section of the Slick's documentation:
In slick 1.4, callback methods have been deprecated and replaced with events.
<...>
breakpoint
Arguments: event, slick, breakpoint.
Fires after a breakpoint is hit.
So you need to take two steps:
Set breakpoints that you need, using the responsive option.
Catch the breakpoint event and do whatever you want.
For example:
var $myCarousel = $('#myCarousel');
/* Step 1 */
$myCarousel.slick({
autoplay: true,
dots: true,
responsive: [
{ breakpoint: 500 },
{ breakpoint: 768 },
{ breakpoint: 992 }
]
});
/* Step 2 */
$myCarousel.on('breakpoint', function(event, slick, breakpoint) {
console.log('breakpoint ' + breakpoint);
});
/* Decorations */
.my-carousel img {
width: 100%;
}
.my-carousel .slick-next {
right: 15px;
}
.my-carousel .slick-prev {
left: 15px;
z-index: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css">
<div id="myCarousel" class="my-carousel">
<div>
<img src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt="">
</div>
<div>
<img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="">
</div>
<div>
<img src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt="">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>
const $slick = $(".health-slick .items");
const $slick_item = $(".health-slick .items .item");
// INIT
slickInit();
animateHoverItem();
// FUNCTIONS
function animateHoverItem() {
$slick_item.mouseover(function() {
$(this).addClass('animate');
});
$slick_item.mouseout(function() {
$(this).removeClass('animate');
});
console.log(0); // this will call 1 time and 1 time when breakpoint window change
}
function slickInit() {
$(document).ready(function () {
$slick.slick({
slidesToShow: 5,
slidesToScroll: 1
responsive: [
{
breakpoint: 767.98,
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 575.98,
settings: {
slidesToShow: 1,
},
}
],
});
$slick.on('breakpoint', function(e){
animateHoverItem();
});
});
}
This is the configuration I am using to create a slick carousel on my web page:
$('#carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: 1008,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 800,
settings: 'unslick',
},
],
})
It is working the way it is supposed to work except for one thing... when I resize my browser window from width: 1920 to 800, the carousel unslicks it, and the content is displayed like normal divs.
But then when I increase the width of the browser window the carousel doesn't recreate it. It remains like HTML div blocks without carousel.
Any help would be appreciated.
unslick is a destructor method. Once you unslick, you need to call slick() again to construct carousel.
This is one way to rebuild the carousel after unslick kills it at a breakpoint:
$(window).resize(function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});
$(window).on('orientationchange', function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});
<section class="regular slider" style="direction:ltr">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
<div>
<img src="http://placehold.it/350x300?text=10">
</div>
<div>
<img src="http://placehold.it/350x300?text=11">
</div>
<div>
<img src="http://placehold.it/350x300?text=12">
</div>
<div>
<img src="http://placehold.it/350x300?text=13">
</div>
<div>
<img src="http://placehold.it/350x300?text=14">
</div>
</section>
/////script/////
$(document).on('ready', function() {
$(".regular").slick({
dots: false,
infinite: true,
slidesToShow: 6,
slidesToScroll: 6,
autoplay: true,
autoplaySpeed: 2000,
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 5,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
});
On each browser resize event you need to do a check and reinitialize the Slick slider if needed (if you are on mobile and Slick slider is not initialized).
/* Get element */
var slider = $('.slider');
/* Slider settings */
var settings = {...}
/* Do this every time window gets resized */
$(window).on('resize', function() {
/* If we are above mobile breakpoint unslick the slider */
if ($(window).width() >= 800)
{
/* Do this only if slider is initialized */
if (slider.hasClass('slick-initialized')) {
slider.slick('unslick');
}
return;
}
/* We are below mobile breakpoint, initialize the slider
if it is not already initialized */
else if (!slider.hasClass('slick-initialized'))
{
return slider.slick(settings);
}
});
$(window).trigger('resize');
I solved the responsive breakpoint issue, recalculating the number of slides at any browser resize.
.testimonialsList: it's the name of the container of my carousel.
// Create carousel
function createTestimonialCarousel(numberOfSlides){
jQuery('.testimonialsList').not('.slick-initialized').slick({
dots: true,
arrows: true,
infinite: true,
slidesToShow: numberOfSlides,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 6000,
pauseOnHover: true
});
}
// Calculate number of slides to show
function calculateNumberOfSlidesToShow(){
var carouselWidth = jQuery(".testimonialsList").width();
var numberOfSlides = 0;
switch (true) {
case (carouselWidth < 767):
numberOfSlides = 1;
break;
case (carouselWidth < 991):
numberOfSlides = 2;
break;
case (carouselWidth < 1199):
numberOfSlides = 3;
break;
case (carouselWidth > 1200):
numberOfSlides = 3;
break;
}
return numberOfSlides;
}
// Reload Carousel on browser resize (to make it responsible)
function reloadCarousel () {
jQuery('.testimonialsList').slick('unslick');
numberOfSlides = calculateNumberOfSlidesToShow();
createTestimonialCarousel(numberOfSlides);
}
// Call updateMaxHeight when browser resize event fires
jQuery(window).on("resize", reloadCarousel);
jQuery(document).ready(function () {
// Initialize the carousel on page load
if (jQuery(".testimonialsList").length) {
setTimeout(function () {
numberOfSlides = calculateNumberOfSlidesToShow();
createTestimonialCarousel(numberOfSlides);
}, 300);
}
});