Develop Reference

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;
}
});

Show first slide longer than other slides in a content slider

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!

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

set dynamic content on slider div

I am trying to use one of these two jquery plugins (awkward/Coda Slider 3) for sliding DIV content.
Everything works fine until I am try to set dynamic content (with js) after the plugin object has been created.
The DIVs show only content that loaded before the plugin created.
Any ideas or other DIV slider plug-in's for this goal.
Thanks.
the ajax working perfect I have checked it.
this is the load function for coda slider $('#slider-id').codaSlider();
and for "awkward" :
$(window).ready(function () {
$("#showcase").awShowcase(
{
content_width: 700,
fit_to_parent: false,
auto: false,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'fade', /* hslide/vslide/fade */
transition_speed: 500,
transition_delay: 300,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
});

Kevin Batdorf has improved on the Coda Slider with something called Liquid Slider which supports ajax and callbacks.
Read a tutorial on it here
And it is available on github.

NivoSlider - Link after slideshow is shown + fade to white?

I am using the Nivoslider script for a project of mine. Basically I'm needing to tweak the slider a little to make it do what I want it to do! I need it to do two things:
How can I make it re-direct to a new page after the slideshow is finished? I can make it stop after it cycles through, but I need it to automatically redirect to another page of the site after my images have been shown. I assume this is through using nivosliders function lastslide.
Is there any way of making nivoSlider fade to white, then to the slide instead of crossfading? I tried to add a "white" slide in between the slides, but you can't specify seperate timing for the slides, so it stayed on this "white slide" for 4 seconds, I need it to fade to white for about 0.5 seconds then fade in the next slide.
Here is my code so far:
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: false, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){$('#slider').data('nivo:vars').stop = true;}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){
var $slider = $('#slider img');
$slider.css('opacity',0);
$('#preloader').fadeOut(500, function(){
$slider.animate({'opacity':1}, 500);
});
} // Triggers when slider has loaded
});
});
</script>
Thanks for any help!

For your first question, just add this line in your afterLoad function()
window.location = "http://google.com"