Is it possbile to combine JS of 4 Bxsliders that I have on one page? Please see JS below.
$(document).ready(function(){
$('.bxslider2').bxSlider({
slideWidth: 645,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 0,
responsive: false,
controls: true,
onSliderLoad: function () {
$('.bxslider2 > li:not(.bx-clone)').eq(1).addClass('active-slide');
},
onSlideBefore: function ($slideElement, oldIndex, newIndex) {
$('.bxslider2 li').removeClass('active-slide');
$($slideElement).next().addClass('active-slide');
}
});
});
I am not good at JS, but I'm sure there is a way to combine that JS, so it's only typed once (rather than copy > paste 4x times with different classes .bxslider2, .bxslider3 etc..) I need to make sure that first slide on each carousel has that class .active-slide.
$(document).ready(function(){
function makeOnSliderLoad(index) {
return function() {
$('.bxslider' + String(index) + ' > li:not(.bx-clone)').eq(1).addClass('active-slide');
}
}
function makeOnSlideBefore(index) {
return function($slideElement, oldIndex, newIndex) {
$('.bxslider' + String(index) + ' li').removeClass('active-slide');
$($slideElement).next().addClass('active-slide');
}
}
for(var sliderIndex = 1; sliderIndex < 5; sliderIndex++) {
$('.bxslider' + String(sliderIndex)).bxSlider({
slideWidth: 645,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 0,
responsive: false,
controls: true,
onSliderLoad: makeOnSliderLoad(sliderIndex),
onSlideBefore: makeOnSlideBefore(sliderIndex)
});
}
});
Related
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 am using Owl Carousel 2 with 3 items per page setup. I want to select every second item when the slide event occurs because I am blurring first and second items and making the only second one visible.
I am using this piece of jQuery code to achieve this:
$("#service-slider .active:eq(1)").addClass("myActive");
And this is how i initiate my Owl Carousel:
$("#service-slider").owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: false,
smartSpeed: 1500,
onChange: activeSelect(),
onDrag: activeSelect(),
onTranslate: activeSelect(),
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 3
}
}
});
$("#service-slider .active:eq(1)").addClass("myActive");
function activeSelect() {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
}
var owl = $('#service-slider');
owl.owlCarousel();
owl.on('next.owl.carousel', function (event) {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
});
owl.on('prev.owl.carousel', function (event) {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
});
It is working fine for the first time but when an item transitioned it is not working; Only working when the whole page changes.
Here is a fiddle: https://jsfiddle.net/iCromwell/mpoxf9rc/1/
user7290573 found a solution. You can use the center option of the Owl Carousel to achieve what I want. His fiddle can be found here: https://jsfiddle.net/y2xhr4dk/
$("#service-slider").owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
center: true,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: false,
smartSpeed: 1500,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 3
}
}
});
I am trying to implement owl slider in my website and it is working good but the only problem is that owl slider show 5 items on one slide by default so I need to make it 3 items to be display per slide instead of 5.
I have also tried to add below code which is available on it official website but it is not working for me please let me know how to fix.
jQuery(document).ready(function(){
jQuery('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true: false,
loop:($(".owl-carousel .item").length > 1) ? true: false,
responsive: {
0: {
items: 1,
},
1140: {
items: 3,
},
1110: {
items: 3,
}
}
})
Thanks
I have a similar problem, and my problem is below:
I import a dynamic css style file;
When document is ready, the dynamic file have not loaded, but owl is inited;
And then the dynamic file loaded, now the dynamic file's some style resize owl-carousel container, but now owl's responsive is not triggered;
You may should init Owl when all style is ready.
window.addEventListener("load", function () {
jQuery('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true : false,
loop: ($(".owl-carousel .item").length > 1) ? true : false,
responsive: {
0: {
items: 1,
},
1140: {
items: 3,
},
1110: {
items: 3,
}
}
}, false);
Another workaround is below:
setTimeout(function () {
$('.owl-carousel').trigger('refresh.owl.carousel');
}, 500);
I have accordion combination: tabs is slider (I use slick carousel with set break point). It work fine, until I resize window over break point, it not until working.
This is my site:
http://geeman-2.myshopify.com/
(New arrivals section)
And this my code:
$(document).ready(function(){
$('.sub-slider').slick({
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
speed: 300,
slidesToShow: 6,
slidesToScroll: 6,
responsive: [
{
breakpoint: 1208,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 798,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
var panelHandle;
$('.btn-on').on('click', function() {
var $this = $(this),
handle = $this.data('handle');
panelHandle = handle;
$('#' + handle).slideDown('slow');
$('.triangle-' + handle).slideDown('slow');
$('.' + handle).slick({
dots: false,
infinite: true,
speed: 300,
arrows: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 798,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
$('.btn-close').on('click', function() {
var $this = $(this),
handle = $this.data('handle');
$('#' + handle).slideUp(1000);
$('.triangle-' + handle).slideUp(1000);
});
});
I hope everyone help me solve it!
Thanks!
Did you try the $('.slick-carousel-responsive').resize(); trick found here? https://github.com/jellekralt/Responsive-Tabs/issues/52 - adding it to my resize event fixed a similar issue for me!
I am using a jquery plugin for testimonial. When i click next slider button it will stop auto sliding. How can i solve that??
here my js code
$('.testimonials-slider').bxSlider({
slideWidth: 800,
minSlides: 1,
maxSlides: 1,
slideMargin: 32,
auto: true,
autoControls: true
});
here my external js
External Js
Live Demo
Try this :
$(document).ready(function () {
var slider = $('.testimonials-slider').bxSlider({
slideWidth: 800,
minSlides: 1,
maxSlides: 1,
slideMargin: 32,
auto: true,
autoControls: true
});
$('.bx-prev, .bx-next').click(function(e){
slider.stopAuto();
setTimeout(function(){
slider.startAuto();
},300);
return false;
});
});