Show first slide longer than other slides in a content slider - javascript

This is a last ditch attempt to try to achieve what I need from this slider. I have implemented a jquery content slider called 'Super Simple Slider' on my website. I have never used this before and so far it has been super simple. However I need the first slide of the slider to display for slightly longer than all of the other slides. 10 seconds. However after much research I can not find a way to do this. Can anybody see a workaround so I can make this happen? Can I perhaps use pure JavaScript along with the jQuery to make this happen?
Below is the jQuery for the slider
<script>
$(function(){
$('.slider').sss({
slideShow : true, // Set to false to prevent SSS from automatically animating.
startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
transition : 400, // Length (in milliseconds) of the fade transition.
speed : 7000, // Slideshow speed in milliseconds.
showNav : true // Set to false to hide navigation arrows.
});
});
</script>

I think the best way to do it is to make some (easy) changes in the plugin:
1. Add an option (to keep it configurable) : speedOnFirst (for example)
In the plugin settings:
var settings = $.extend({
slideShow : true,
startOn : 0,
speed : 3500,
speedOnFirst : 3500, // <--- HERE
transition : 400,
arrows : true
}, options);
2. Change the timeout in reset_timer function
Check if target == 0 (it means it's the first slide), and then, base your timeout on settings.speedOnFirst instead of settings.speed
reset_timer = settings.slideShow ? function() {
clearTimeout(timer);
speed = (0 !== target) ? settings.speed : settings.speedOnFirst; // <--- HERE
timer = setTimeout(next_slide, speed); // <--- Change second param here
} : $.noop;
3. Call your plugin
$('.slider').sss({
slideShow : true,
startOn : 0,
transition : 400,
speed : 7000,
speedOnFirst : 10000, // <--- Delay for your first slide
showNav : true
});
>> See working demo here
NB: In the demo, the slides changes quickly so as you can see the difference with the first one, juste change the values with whatever you need.

You will need to customize the plugin to accomplish what you need.
Look at the non minified version (sss.js) and add the following logic:
Add an extra option:
var settings = $.extend({
slideShow: true,
startOn: 0,
speed: 3500,
transition: 400,
arrows: true,
firstSlideSpeed:10000 // new setting for first slide speed
}, options);
Change the slide logic:
reset_timer = settings.slideShow ? function () {
clearTimeout(timer);
var slideSpeed = ((target === 0) && settings.firstSlideSpeed) ? settings.firstSlideSpeed : settings.speed; // changed here
timer = setTimeout(next_slide, slideSpeed); // changed here
} : $.noop;
This should do the trick for you.
Hope it helps!

Related

I can't get jQuery plugin AnythingSlider to work in JS Bin

I am trying to add a jQuery plugin to a website I am working on for one of my coding classes. (see code at https://jsbin.com/jawibotera/edit?html,output) I am trying to add the plugin AnythingSlider to my code. I am following the documentation on the Github wiki page (https://github.com/CSS-Tricks/AnythingSlider/wiki/Setup) especially for the code in the head tags and the example HTML. However the output always shows the three pictures underneath each other and aren't in a slide show. So far I've changed the css pages and have made sure I have set everything to jQuery. I removed all the optional plugins and used all the links provided from my coding course. For the assignment, I was given these links:
http://skillcrush.com/wp-content/themes/skillcrush2.30/class-files/anything-slider/js/jquery.anythingslider.min.js
http://skillcrush.com/wp-content/themes/skillcrush2.30/class-files/anything-slider/css/anythingslider.css
Even when I use the links my coding course provides, I am not able to get a slideshow. I looked at the code for the examples on the Github page to double check my own code, however I can't find any errors. Should I link two css pages to one site? If not, which css page should I use?
I would really recommend that you go with flexslider, as it is far superior to this in my opinion, and I don't know what was wrong with your implementation but when moving your site on top of a JSFiddle with anythingslider already in it, it worked just fine. Here is the link:
http://jsfiddle.net/ycUB6/10706/
and since the only thing I changed was the Jquery here it is too:
var modalContainer = $("#modal-container");
var hideModal = function() {
modalContainer.hide();
};
var showModal = function() {
modalContainer.show();
};
var modalShowButton = $("#modal-show");
modalShowButton.on("click", showModal);
var modalCloseButton = $("modal-hide");
modalCloseButton.on("click", hideModal);
$(document).on("keyup", function(evt) {
evt = evt || window.event;
if (evt.keyCode === 27) {
hideModal();
}
});
var handleNewsletterSignup = function(evt) {
evt.preventDefault();
var newsletterHeader = $("#newsletter-header");
var newsletterForm = $("#newsletter-signup");
newsletterForm.hide();
newsletterHeader.text("Thank you for signing up!");
setTimeout(hideModal, 2000);
};
var newsletterForm = $("#newsletter-signup");
newsletterForm.on("submit", handleNewsletterSignup);
var clockTime = function() {
var currentTime = new Date ();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (hours <= 11) {
var period = "AM";
} else {
var period = "PM";
}
if (hours > 12) {
hours = hours - 12;
} else if (hours === 0) {
hours = 12;
}
if (minutes < 10) {
minutes = "0" + String(minutes);
}
if (seconds < 10) {
seconds = "0" + String(seconds);
}
var time = hours + ':' + minutes + ':' + seconds + ' ' + period;
return time;
};
var clock = $("#clock");
setInterval(function() {
clock.text(clockTime());
}, 1000);
$('#slider').anythingSlider({
// *********** Appearance ***********
// Theme name; choose from: minimalist-round, minimalist-square,
// metallic, construction, cs-portfolio
theme: 'default',
// Set mode to "horizontal", "vertical" or "fade"
// (only first letter needed); replaces vertical option
mode: 'horizontal',
// If true, the entire slider will expand to fit the parent element
expand: false,
// If true, solitary images/objects in the panel will expand to
// fit the viewport
resizeContents: true,
// Set this value to a number and it will show that many slides at once
showMultiple: false,
// Anything other than "linear" or "swing" requires the easing plugin
easing: "swing",
// If true, builds the forwards and backwards buttons
buildArrows: true,
// If true, builds a list of anchor links to link to each panel
buildNavigation: true,
// If true, builds the start/stop button
buildStartStop: true,
// Append forward arrow to a HTML element
// (jQuery Object, selector or HTMLNode), if not null
appendFowardTo: null,
// Append back arrow to a HTML element
// (jQuery Object, selector or HTMLNode), if not null
appendBackTo: null,
// Append controls (navigation + start-stop) to a HTML element
// (jQuery Object, selector or HTMLNode), if not null
appendControlsTo: null,
// Append navigation buttons to a HTML element
// (jQuery Object, selector or HTMLNode), if not null
appendNavigationTo: null,
// Append start-stop button to a HTML element
// (jQuery Object, selector or HTMLNode), if not null
appendStartStopTo: null,
// If true, side navigation arrows will slide out on
// hovering & hide # other times
toggleArrows: false,
// if true, slide in controls (navigation + play/stop button)
// on hover and slide change, hide # other times
toggleControls: false,
// Start button text
startText: "Start",
// Stop button text
stopText: "Stop",
// Link text used to move the slider forward
// (hidden by CSS, replaced with arrow image)
forwardText: "»",
// Link text used to move the slider back
// (hidden by CSS, replace with arrow image)
backText: "«",
// Class added to navigation & start/stop button
// (text copied to title if it is hidden by a negative text indent)
tooltipClass: 'tooltip',
// if false, arrows will be visible, but not clickable.
enableArrows: true,
// if false, navigation links will still be visible, but not clickable.
enableNavigation: true,
// if false, the play/stop button will still be visible, but not
// clickable. Previously "enablePlay"
enableStartStop: true,
// if false, keyboard arrow keys will not work for this slider.
enableKeyboard: true,
// *********** Navigation ***********
// This sets the initial panel
startPanel: 1,
// Amount to go forward or back when changing panels.
changeBy: 1,
// Should links change the hashtag in the URL?
hashTags: true,
// if false, the slider will not wrap
infiniteSlides: true,
// Details at the top of the file on this use (advanced use)
navigationFormatter: function(index, panel) {
// This is the default format (show just the panel index number)
return "" + index;
},
// Set this to the maximum number of visible navigation tabs;
// false to disable
navigationSize: false,
// *********** Slideshow options ***********
// If true, the slideshow will start running; replaces "startStopped" option
autoPlay: false,
// If true, user changing slides will not stop the slideshow
autoPlayLocked: false,
// If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
autoPlayDelayed: false,
// If true & the slideshow is active, the slideshow will pause on hover
pauseOnHover: true,
// If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
stopAtEnd: false,
// If true, the slideshow will move right-to-left
playRtl: false,
// *********** Times ***********
// How long between slideshow transitions in AutoPlay mode (in milliseconds)
delay: 3000,
// Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
resumeDelay: 15000,
// How long the slideshow transition takes (in milliseconds)
animationTime: 600,
// How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
delayBeforeAnimate : 0,
// *********** Callbacks ***********
// Callback before the plugin initializes
onBeforeInitialize: function(e, slider) {},
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {},
// Callback on slideshow start
onShowStart: function(e, slider) {},
// Callback after slideshow stops
onShowStop: function(e, slider) {},
// Callback when slideshow pauses
onShowPause: function(e, slider) {},
// Callback when slideshow unpauses - may not trigger
// properly if user clicks on any controls
onShowUnpause: function(e, slider) {},
// Callback when slide initiates, before control animation
onSlideInit: function(e, slider) {},
// Callback before slide animates
onSlideBegin: function(e, slider) {},
// Callback when slide completes - no event variable!
onSlideComplete: function(slider) {},
// Callback when slider resizes
onSliderResize: function(e, slider) {},
// *********** Interactivity ***********
// Event used to activate forward arrow functionality
// (e.g. add jQuery mobile's "swiperight")
clickForwardArrow: "click",
// Event used to activate back arrow functionality
// (e.g. add jQuery mobile's "swipeleft")
clickBackArrow: "click",
// Events used to activate navigation control functionality
clickControls: "click focusin",
// Event used to activate slideshow play/stop button
clickSlideshow: "click",
// *********** Video ***********
// If true & the slideshow is active & a youtube video
// is playing, it will pause the autoplay until the video
// is complete
resumeOnVideoEnd: true,
// If true the video will resume playing (if previously
// paused, except for YouTube iframe - known issue);
// if false, the video remains paused.
resumeOnVisible: true,
// If your slider has an embedded object, the script will
// automatically add a wmode parameter with this setting
addWmodeToObject: "opaque",
// return true if video is playing or false if not - used
// by video extension
isVideoPlaying: function(base) {
return false;
}
});

$(selector).flexslider ({ before: function() }) issue - skips first slide

Trying to relocate captions on flexslider,thought I could do:
var myP = $('p.flex-caption').detach().appendTo(x);
where x would be whatever element I wanted the captions to appear after.
In practice it works ok - I get a dump of all of the captions instead of just the one associated with the active slide but that may be just a css thing -the bigger problem is this doesn't happen until the second slide. I am calling this inside of flexslider.js, (pasted below) inside of $(selector).flexslider and inside of 'before' - I'm guessing the problem has something to do with how things are loaded. In an alternate approach, instead of using detach() to just pluck the p off and re-locate it, I tried creating an element - captionDiv - inside of which another created element - caption - would get filled with the html returned from querying slider.slides[slider.animatingTo] but, again, the first caption wouldn't appear.
$(selector).flexslider( {
smoothHeight: options.h_responsive,
animation: options.animation,
direction: options.direction,
slideshow: options.slideshow,
slideshowSpeed: Number( options.cycle_speed ) * 1000,
animationSpeed: Number( options.animation_speed ) * 1000,
pauseOnHover: options.pause_on_hover,
controlNav: options.control_nav,
directionNav: options.direction_nav,
keyboard: options.keyboard_nav,
touch: options.touch_nav,
before: function( slider ) {
slider.removeClass('loading');
//added for outside caption
//var sgmCaption = $('p.flex-caption');
var tnh = $('div.flex-thumbnail-holder');
//sgmCaption.detach().appendTo(tnh);
if (!slider.captionDiv) {
slider.captionDiv = document.createElement("div");
slider.captionDiv.setAttribute("class", $(slider)[0].getAttribute("id") + "-caption flex-outside-caption");
//$(slider.captionDiv).insertAfter($(slider));
$(slider.captionDiv).insertAfter($(tnh));
}
var caption = slider.slides[slider.animatingTo].querySelector('.flex-caption');
slider.captionDiv.innerHTML = caption ? caption.innerHTML : "";
}
});
Thank you for your help.
Per documentation:
$(selector).flexslider({
// Callback: function(slider) - Fires when the slider loads the first slide
start: function(){},
// Callback: function(slider) - Fires asynchronously with each slider animation
before: function(){}
});
before callback is fired only when animation between slides starts. You need to prepare the caption of the first slide yourself - after hooking up or in the start callback.

Back button js slideshow

I'm not familiare with js and I am trying to make a slider witch contains html divs with animation. This is the js I use:
$(function(){
// find all slides
var slides = $('.main-slide');
// starting index
var i = 0;
// click listener
$('#main-slider-next').click(function(){
// find next index
// i + 1 or 0 if end of slides
i = ++i % slides.length;
// scroll to that index
$('.slider-wrapper').animate(
{'left' : -(slides.eq(i).position().left)},
1000
);
});
});
The code contains a next-slide button, but I am wondering how to make a previous-slide button with js. Does anyone have a clue how I can make that?
quite easy. try:
$('#main-slider-previous').click(function() {
$('.slider-wrapper').animate({
'left': '+=100%'
},1000);
});
You can always use some simple jQuery slider e.g http://www.basic-slider.com/ (or more advanced http://unslider.com/)
All you have to do is to change animation type settings:
animtype : 'fade',
to
animtype : 'slide',
And you're ready to go ;).

How to make Basic jQuery Slider to stop after 1 loop

I'm using this basic jQuery slider, but like it to stop after 1 cycle and not loop. I don't see that as one of the options for customization. Any idea how to customize on top of it?
http://www.basic-slider.com/
Thanks in advance!
This is what I have so far:
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
// w + h to enforce consistency
width : 660,
height : 235,
// transition valuess
animtype : 'slide',
animduration : 350, // length of transition
animspeed : 10000, // delay between transitions
automatic : true, // enable/disable automatic slide rotation
// control and marker configuration
showcontrols : false, // enable/disable next + previous UI elements
centercontrols : false, // vertically center controls
nexttext : 'Next', // text/html inside next UI element
prevtext : 'Prev', // text/html inside previous UI element
showmarkers : false, // enable/disable individual slide UI markers
centermarkers : false, // horizontally center markers
// interaction values
keyboardnav : false, // enable/disable keyboard navigation
hoverpause : false, // enable/disable pause slides on hover
// presentational options
usecaptions : false, // enable/disable captions using img title attribute
randomstart : false, // start from a random slide
responsive : false, // enable responsive behaviour
});
});
I have customized and added an option to stop this automatic slider after a loop. Slide change will stop at the last slide. option called 'rotate'. By default, its true. You need to set it as false to avoid next rotation.
Code will be like
$('#banner-fade').bjqs({
height : 320,
width : 620,
responsive : true,
automatic : true,
rotate : false,
});
You can find the updated plugin jquery file on the following links
Basic slider Normal
Minified

Basic jQuery Slider - Current Slide Number

I'm currently having issues displaying the current slide number, basically I need to have the current slides number inserted into a span class called current slide. I'm using follow jquery slider: http://basic-slider.com
I'm using this snippet to call the script.
jQuery(document).ready(function($) {
var total = jQuery('.bjqs li').length;
$('#banner-slide').bjqs({
animtype : 'slide',
height : 490,
width : 695,
showmarkers : false,
responsive : false
});
jQuery('#slider-status > .total-slides').html(total);
});
According to the design it needs to be shown as 1(current slide) / 3(being total amount)
Any help would be very much appreciated!
If you are not using bjqs min file you can modify set_next function to get current slide number and apped it to span.
Try this:
$('#banner-slide').bjqs({
animtype : 'slide',
height : 490,
width : 695,
showmarkers : true, // set it to true
responsive : false
});
From http://basic-slider.com/
showmarkers : true, // Show individual slide markers

Categories

Resources