I'm currently using Jquery Cycle plugin for my project and the slideshow is running smoothly. However, I want my slide to display or start with a different image on every page refresh. I'm not sure how to add a function/script to achieve that or if it's possible. I'm new to JQuery so any help would greatly be appreciated!
Script:
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
speed: 2500,
timeout: 7000,
prev: '#prev',
next: '#next',
});
});
My HTML:
<div class="slideshow">
<img src="images/img_slide-1.jpg" />
<img src="images/img_slide-2.jpg" />
<img src="images/img_slide-3.jpg" />
</div>
Use the startingslide option
startingSlide: 0, // zero-based index of the first slide to be displayed
To pick a random slide you need to get a random index like this
var rand = Math.floor(Math.random() * $('.slideshow img').length);
Then, when you initiliaze the cycle, use the rand variable as the startingslide.
$(document).ready(function() {
var rand = Math.floor(Math.random() * $('.slideshow img').length);
$('.slideshow').cycle({
fx: 'fade',
speed: 2500,
timeout: 7000,
prev: '#prev',
next: '#next',
startingSlide: rand
});
});
Doing some quick research on this plugin (I have never used it before), it looks like there is a random option that you can specify as true. Take a look in the docs: http://jquery.malsup.com/cycle/options.html (just ctrl-f for "random").
If you were looking from just a random first picture, then sequential slides after (as stated in the comments), just use startingSlide: SLIDE_NUMBER_HERE, and it should work, based on minimal research on the docs.
Related
I'm running the latest version of Bxslider (4.2.14), everything works great except for the pager.
When using the pager to switch between slides, pause is much shorter than it should be:
Steps to reproduce:
Open the Fiddle: https://jsfiddle.net/Bruno42/smvhe3o4/7/
When Slide #2 appears wait ~3-4 seconds
Switch back to Slide #1 by clicking on the pager
Pause should then last 5 seconds (like during the "auto" mode), but instead it lasts only 1-2 seconds
I think the Pause countdown should be resetted to 5 seconds every time a slide is selected using the Pager.
I spent a while trying to figure out a solution in the clickPagerBind() function in jquery.bxslider.js by using clearInterval(slider.interval); to fix this, however it did not work (slider gets stuck after that).
Code used to load bxSlider (also available on my JsFiddle):
$('.bxslider').bxSlider({
maxSlides: 1,
slideWidth: 800,
pager: true,
pagerType: 'full',
autoHover: false,
auto: true,
stopAuto: false,
stopAutoOnClick: false,
speed: 1000,
pause: 5000,
mode: 'horizontal',
controls: false,
});
I would really appreciate your help on that.
The speed: 1000 might be too fast for the transition to complete and for startAuto() and stopAuto() methods to start or end. In order to control what methods are called during transition we can use a callback from the bxSlider API. Make a custom function and call it on either onSlideAfter or onSlideBefore. The following demo calls function pagerFix() onSlideAfter:
function pagerFix($bx, prv, nxt) {
bx.stopAuto(true);
bx.goToSlide(nxt);
bx.stopAuto(false);
bx.startAuto(true);
}
When initializing .bxSlider() make sure you reference it so you can call the methods.
let bx = $('.bxslider').bxSlider(...
Fiddle
(uses onSlideBefore)
Demo
(uses onSlideAfter)
let bx = $('.bxslider').bxSlider({
slideWidth: 800,
auto: true,
speed: 1000,
pause: 5000,
controls: false,
onSlideAfter: pagerFix
});
function pagerFix($bx, prv, nxt) {
bx.stopAuto(true);
bx.goToSlide(nxt);
bx.stopAuto(false);
bx.startAuto(true);
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css' rel='stylesheet'>
<ul class="bxslider" style="width: 800px; height: 250px;">
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=1"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=2"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=3"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=4"></li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js'></script>
I have downloaded Menucool slider code. I am using the demo code present in the above link. My requirement is , when I click on the radio button below the slider, I need the slider to pause for few seconds ( for me it's 10 seconds).The default interval is 2.6 seconds.
I have tried to change the time interval by using Jquery onclick.But it is not working.
Below is my html code.
<div id="sliderFrame">
<div id="slider">
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-2.jpg" />
<img src="images/image-slider-3.jpg" />
<img src="images/image-slider-4.jpg" />
<img src="images/image-slider-5.jpg" />
</div>
</div>
and my javascript code for slider options is
var sliderOptions=
{
sliderId: "slider",
startSlide: 0,
effect: "series1",
effectRandom: false,
pauseTime: 2600,
transitionTime: 500,
slices: 12,
boxes: 8,
hoverPause: 1,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
m: false,
license: "mylicense"
};
var imageSlider=new mcImgSlider(sliderOptions);
I have tried to change the pausetime to 10000 in another function which executes after clicking the radio buttons.The code is below.
<script type="text/javascript">
$("document").ready(function(){
$(".active").click(function(){
alert("hi");
var sliderOptions=
{
sliderId: "slider",
startSlide: 0,
effect: "series1",
effectRandom: false,
pauseTime: 10000,
transitionTime: 500,
slices: 12,
boxes: 8,
hoverPause: 1,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
m: false,
license: "mylicense"
};
})
var imageSlider=new mcImgSlider(sliderOptions);
})
</script>
Can someone please help me how to achieve this functionality..
Check the Methods supported by Menucool slider library.
pauseTime option will be used only on mouseout, mouseover events.
To fulfill your requirements, you have to use "switchAuto" function.
Here is the working demo.
Javascript :
$("#changeInterval").change(function(){
var that = this;
if(this.checked && imageSlider.getAuto()) {
imageSlider.switchAuto(); // pause the animation (auto: false)
setTimeout(function(){
that.checked = false; // uncheck the radio button
imageSlider.switchAuto(); // resume the animation (auto: true)
}, 10000); // 10 seconds
}
});
In the above code, I am binding "change" event on radio button (id: changeInterval).
By default in the option list, auto value has been set to true so when we call "switchAuto" function, it changes the auto value to false which stops animation. And after 10 seconds I am again calling the "switchAuto" function to resume the animation.
In this way you can pause animation for specified time.
So first off I have basically no working knowledge of javascript or Jquery. Second off I have tried to look up answers to this and tried a few things but nothing worked for me.
My slides seem to change every 6 or 7 seconds. I want to make each slide last longer. Maybe about 12 seconds before changing. I have tried changing the speed and timeout values and adding mouse overs for a pause feature but nothing has worked.
This is the code built into the web template. Top half looks to be for admin editing, while bottom is the general page view. Any help with this is greatly appreciated.
jQuery.noConflict();
jQuery(document).ready(function($){
// Checks for Admin to apply fixes for backend
if ( $('#adminbar #toolbar').length ) {
$('#features').cycle({
fx: 'scrollRight',
speed: 100,
next: '#next',
prev: '#prev',
timeout: 0
});
$("#controls").show();
$("ul#featuredNav").css({
'margin-top': '-38px'
});
$("ul#featuredNav li").css({
'margin': '-20px 0 90px',
'padding': '0 0 0 20px'
});
$("#featuredWrapper").css({
'margin': '0 0 80px'
});
}
else {
$('#features').cycle({
fx: 'scrollRight',
pager: '#featuredNav',
speed: 500,
timeout: 6000,
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return '#featuredNav li:eq(' + idx + ')';
},
updateActivePagerLink: function(pager, currSlideIndex) {
$(pager).find('li').removeClass('activeTab')
.filter('li:eq('+currSlideIndex+')').addClass('activeTab');
}
});
$("#controls").hide();
}
});
Change
timeout: 6000,
to
timeout: 12000,
then clear your browser and site caches.
I'm using slidesjs to create a slideshow on my site, this is working fine but I want to add a incremented class to the body tag e.g. slide-1 at load and then when the slide changes slide-2 etc until the slide fully rotates and it goes back to slide-1
My current code is;
<script>
$(function(){
$('#feature-slideshow').slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: true,
animationStart: function() {
$("body").addClass("slide");
}
});
});
</script>
I have two problems;
1) the I want the initial class set before the slideshow has loaded so that the style which is a background is applied when the page is loaded rather than the slideshow
2) How to increment the slide-x class when the slideshow is transitioned/changed.
Any help would be greatly appreciated
Just add the initial class to body directly (<body class="slide-1">). No need to let JavaScript do this since it will always start at slide 1.
To increment that number you can set the currentClass option so that we can get the index of the current slide with .index().
$(function(){
var slideshow = $("#feature-slideshow");
slideshow.slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: true,
currentClass: "current"
animationStart: function() {
var idx = slideshow.children(".current").index();
document.body.className = "slide-"+(idx+1);
}
});
});
Ok managed to get this to work, thanks to Marcus for his help, I just tweaked your code to pickup the correct list 'pagination' which had the current class applied;
$(function(){
var slideshow = $("#feature-slideshow");
slideshow.slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: false,
currentClass: "current",
animationStart: function() {
var idx = $('ul.pagination').children(".current").index();
document.body.className = "slidebg-"+(idx+1);
}
});
});
I had to apply slidebg-3 to the body tag as for some reason when the slideshow cycles it includes the first list
Works great though apart from removing all other body classes, I suppose I could add it as an ID as I'm not using one of those
Anyway hope this helps someone else!
I'm in the process of making a carousel-based Tumblr theme HERE but I'm very disappointed with the animation. Is there anything I can add to this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2
/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js">
</script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle
/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com
/jquery.easing.1.1.1.js">
</script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;
$('#s7').cycle({
fx: 'scrollRight',
speed: 'fast',
timeout: 0,
easeIn: 'bounceout',
easeOut: 'backin',
next: '#next2',
prev: '#prev2'
});
function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
//window.console.log( $(this).parent().children().index(this) );
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src)
.append('<h3>' + this.alt + '</h3>');
}
</script>
To make the animation of the carousel smoother?
Change up your options, mate.
$('#s7').cycle({
fx: 'scrollRight',
speed: 1000,
timeout: 0,
next: '#next2',
prev: '#prev2',
easing: 'easeinout'
});
I've had a good experience with defining my images as background images in CSS, rather than using actual tags in HTML. This greatly increased the smoothness of scrolling using a Bootstrap carousel and Chrome. The markup / CSS for this would be something like this:
HTML:
<div id="my-image">
</div>
CSS:
#my-image {
background:url("image.png") no-repeat 0 0;
}
The smoothness (or lack thereof) of an animation like this depends a lot on the browser in use, as well as the computer being used (slower computer = more stilted animation).
You might try using a more CSS3 based approach (i.e. less reliant on JS), but that would be limited to modern browsers (in this case webkit only).