How To Enable Autoplay in Nivo Slider HTML - javascript

$('#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.

Related

Release on Edges Scroll is not smooth

Hey I'm using swipper js to build a vertical slider!
The Intended Solution:
-> When building the slider , i want to release the mouse scroll as soon it reaches the first or last slide.
The Problems:
-> Sometimes it makes the page scroll and the slider at the same time (happened only a few times) when i lowered the swiper version to 4.5.1
-> Main problem happened when i was working with version 5.3.1, when reaching the first or last slide, it scrolled too suddently, and the transition wasn't smooth which caused some usability problems...
<script src="https://unpkg.com/swiper#5.3.1/js/swiper.min.js"></script>
Code:
Version 4.5.1
let productSwiper = new Swiper(".swiper-container--product", {
direction: "vertical",
loop: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
grabCursor: true,
speed: 1000,
paginationClickable: true,
parallax: true,
autoplay: false,
effect: "slide",
centerMode: false,
mousewheel: true,
loopFillGroupWithBlank: false,
slidesPerView: 'auto',
touchReleaseOnEdges:true
});
productSwiper.swiper;
Version 5.3.1
let productSwiper = new Swiper(".swiper-container--product", {
direction: "vertical",
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
grabCursor: true,
speed: 1000,
parallax: true,
autoplay: false,
effect: "slide",
centerMode: false,
mousewheelSensitivity: 1,
mousewheel: {
releaseOnEdges: true,
},
loopFillGroupWithBlank: false,
slidesPerView: 'auto',
Note: I removed the release on edges atribute on the 4.5.1 version, because currently it was causing that bug.
Sorry for the long post , thanks in advance!

Flexslider continue on pop up

How do i make the flexslider continue to rotate on any screen pop up or when browser not in focus?
My code used:
// Flex Slider for Homepage
$('#home-flexslider .flexslider').flexslider({
animation: "fade",
slideshowSpeed: 5000,
animationSpeed: 1500,
pauseOnHover: false,
directionNav: true,
controlNav: false,
keyboardNav: true,
start: function (slider) {
slider.removeClass('loading');
}
});

Remove Snap Back in OwlCarousel when using SinglePage setting

Currently I am experiencing a snap back from the last image to the first when OwlCarousel reaches the last image. I would prefare it to continuously repeat in the same direction.
Is there a setting for this?
Currently the code is:
g.owlCarousel({
navigation: false,
slideSpeed: 500,
items: 1,
pagination: false,
loop: true,
mouseDrag: false,
touchDrag: false,
autoPlay: true,
singleItem: true
});

Responsive JavaScript – load/hide specific function related to browser width?

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/

jQuery multi sliders change slide in one time

I'm using slidesjs and I want make multi sliders
I have 2 sliders #show and #show2, and I want that 2 slidersw work in 1 time: slides will be change in one time.
Now now 1 slider slides change earlier than 2, what is wrong in my code ?
I want that slides will change in one time:
<script>
$(function(){
$("#show").slidesjs({
width: 900,
height: 300,
navigation: false,
pagination: {active: false},
play: {
auto: true,
pauseOnHover: true,
effect: "fade",
},
effect: {
slide: {
speed: 200
},
fade: {
speed: 300,
crossfade: true
}
}
});
$("#show2").slidesjs({
width: 900,
height: 300,
navigation: false,
pagination: {active: false},
play: {
auto: true,
pauseOnHover: true,
effect: "fade",
},
effect: {
slide: {
speed: 200
},
fade: {
speed: 300,
crossfade: true
}
}
});
});
</script>
I try .ready but slides also change in different time

Give them both a class, and target them at the same time.
<div class="sliders" id="show"></div>
<div class="sliders" id="show2"></div>
JS:
$(".sliders").slidesjs({ ... });

Categories