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