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;
});
});
Related
$('#nivoslider-style-1').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 5000,
startSlide: 0,
directionNav: false,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: true
});
My guess would be to change startSlide: 0 to startSlide: 1
Scratch that. You have manualAdvance: true and it should be false. Be sure to change startSlide back to 0.
I want to use Slick Slider to start form 20th slide. My code is:
<script>
$(document).ready(function(){
$('.timeline-items').slick({
slidesToShow: 5,
slidesToScroll: 4,
dots:true,
arrows:true,
infinite:false,
autoplay: true,
autoplaySpeed: 4500
});
$('.timeline-items').slickGoTo(20, false);
});
</script>
Slider fires OK (.slick functions starts), but then i got:
Uncaught TypeError: $(...).slickGoTo is not a function
What I do wrong?
from documentation:
slickGoTo
int : slide number, boolean: dont animate
Navigates to a slide by index
$(function() {
var tiSlick = $('.timeline-items').slick({
slidesToShow: 5,
slidesToScroll: 4,
dots:true,
arrows:true,
infinite:false,
autoplay: true,
autoplaySpeed: 4500
});
tiSlick.on('init', function(event, slick) {
tiSlick.slick('slickGoTo', 20);
});
});
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)
});
}
});
I have simple bx-slider here. After shrink browser window to small size like 360 slides in recentSoldCarousel act strange. When you click on left/right control you can see correct slide and after that slide blink and another - wrong slide is loading.
Here is my code:
$('#recentSoldCarousel .carousel-inner').bxSlider({
slideWidth: 247,
minSlides: 1,
maxSlides: 3,
moveSlides: 3,
pager: false,
slideMargin: 10,
startSlide: 0,
touchEnabled: true,
oneToOneTouch: true,
preventDefaultSwipeX: true,
preventDefaultSwipeY: true,
autoDirection: 'next',
});
I'm newbe in jQuery so if anybody can help me i will be very gratefull.
first fo all: i'm not into JavaScript/JQuery! …but i will try to point out what i want to do.
i'm using the fantastic bx-slider on my page and i made my website responsive via media queries which both works great so far. …but there are some features from the bx-slider-script which i don't want to get active on a specific browser-width. here's what i want:
browser-width LOWER than 500px = load this function:
$('#slider4').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: 230,
slideMargin: 10,
nextSelector: '#next',
prevSelector: '#prev',
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
useCSS: false,
easing: 'easeInOutExpo',
speed: 1000
});
browser-width HIGHER than 500px = hide the function above and load this one:
$('#slider4').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 230,
slideMargin: 20,
nextSelector: '#next',
prevSelector: '#prev',
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
useCSS: false,
easing: 'easeInOutExpo',
speed: 1000
});
…is that even possible in JavaScript? I tried some scripts which are using breaking points but it think my JS-knowledge is to weak to get this to work as i want.
It would be great if there's someone out here which can show me how to do this easily!
If($(document).width() < 500){
...
}else{
...
}
http://api.jquery.com/width/
You may also want to put in an onchange event
$( window ).resize(function() {
resizefunction();
});
http://api.jquery.com/resize/