I'm using JQuery cycle plugin to make a slideshow in HTML. I believe that I have done everything right but it's not in an actual slideshow frame, the pictures are just below eachother like this:
I'm asking for a fresh pair of eyes and brain to help fix this :)
Oh! Almost forgot, here's my code:
<script src="Scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/modernizr-2.5.2-respond-1.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/twitter_search.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/xml">
</script>
<div id="Slide#1">
<script type="text/javascript">
// BeginOAWidget_Instance_2827522: #OAWidget
$(window).load(function() {
$('#slider').flexslider({
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "slide",
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal", //String: Select the sliding direction, 'horizontal' or 'vertical'
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: false, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: true, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 5000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false, //Boolean: Randomize slide order
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: false, //Boolean: Allow slider navigating via mousewheel
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: "Pause", //String: Set the text for the "pause" pausePlay item
playText: "Play", //String: Set the text for the "play" pausePlay item
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: true, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
// Carousel Options
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 10, //{NEW} Integer: Margin between carousel items.
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
// EndOAWidget_Instance_2827522
</script>
<div id="main-container">
<p> </p>
<div id="main" class="wrapper clearfix">
<!-- FlexSlider -->
<div id="container">
<div id="slider" class="flexslider">
<ul class="slides">
<li> <img src="images/1.png" /> </li>
<li> <img src="images/2.png" /> </li>
<li> <img src="images/3.png" /> </li>
</ul>
</div>
<div id="carousel" class="flexslider" style="display:none;">
<ul class="slides">
<li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_donut.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_donut.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li>
</ul>
</div>
</div>
</div>
<!-- #main -->
</div>
<!-- #main-container -->
</div>
If for some reason this isn't displaying correctly, here's a pastebin :)
http://pastebin.com/Zq5Xww6k
Thanks in advance,
CMNatic
I'm unfamiliar with this plugin but from the effects, it looks like the html and javasrcipt are not enough, looks like you are missing css,
for example here are the basics
.slides {
position: relative;
height: 200px; /*height required*/
width: 500px /* width required*/
}
.slides li {
position: absolute;
top: 0; left: 0;
}
Related
Main Issue
I am trying to use Swiper within a div that has it's visibility toggled. However, after hiding and showing the div, Swiper does not autoplay - even after triggering mySwiper.Update(), mySwiper.autoplay.start(), with observer and observeParents options set true.
Alternative Solution
Using new Swiper inside the toggle visibility function does work to make it autoplay, but it causes a new set of problems. Dragging doesn't work properly and the autoplay will jump around sporadically.
Code
I created two codepens to demonstrate:
Main (Update & Autoplay)
Alternative (Destroy & Re-create)
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
</head>
<style>
.hidden {
display: none;
}
.nav, .swiper-container {
text-align: center;
margin: 10px;
}
</style>
<body>
<div class="nav">
Toggle Hidden
Start Autoplay
</div>
<!-- Swiper parent container -->
<div class="swiper-parent active">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src='https://cdn.pixabay.com/photo/2019/08/19/07/45/pets-4415649_960_720.jpg' class="slide-image"/>
</div>
<div class="swiper-slide">
<img src='https://cdn.pixabay.com/photo/2019/07/02/08/10/sunny-4311828_960_720.jpg' class="slide-image"/>
</div>
<div class="swiper-slide">
<img src='https://cdn.pixabay.com/photo/2019/08/25/16/57/purple-4429887_960_720.jpg' class="slide-image"/>
</div>
<div class="swiper-slide">
<img src='https://cdn.pixabay.com/photo/2019/02/15/11/04/book-3998252_960_720.jpg' class="slide-image"/>
</div>
</div>
</div>
</div>
<script>
//Swiper Initialization
new Swiper('.swiper-container', {
// Optional parameters
observer: true,
observeParents: true,
loop: true,
loopedSlides: 4,
slidesPerView: 1,
speed: 1800,
autoplay: {
delay: 100,
disableOnInteraction: true,
},
});
var mySwiper = document.querySelector('.swiper-container').swiper;
function startFunction(){
mySwiper.autoplay.start();
};
function toggleHidden(){
if ($('.swiper-parent').hasClass('active')){
$('.swiper-parent').removeClass('active');
$('.swiper-parent').addClass('hidden');
} else {
$('.swiper-parent').removeClass('hidden');
$('.swiper-parent').addClass('active');
mySwiper.update();
mySwiper.autoplay.start();
};
};
</script>
</body>
</html>
Alternative toggle function:
function toggleHidden(){
if ($('.swiper-parent').hasClass('active')){
$('.swiper-parent').removeClass('active');
$('.swiper-parent').addClass('hidden');
mySwiper.destroy();
} else {
$('.swiper-parent').removeClass('hidden');
$('.swiper-parent').addClass('active');
new Swiper('.swiper-container', {
observer: true,
observeParents: true,
loop: true,
loopedSlides: 4,
slidesPerView: 1,
speed: 1800,
autoplay: {
delay: 100,
disableOnInteraction: true,
},
});
var mySwiper = document.querySelector('.swiper-container').swiper;
};
};
I found a solution, though, I am inexperienced so I imagine it is not the best or cleanest way to accomplish this.
Here is the codepen solution
I used this line $("#swiper-parent-id").load(location.href+" #swiper-parent-id>*",""); to reload the div content, causing the instance of Swiper to be destroyed when hiding the div.
Then when showing the div, I created a new instance of Swiper.
This is what I intended to do with the alternative solution, but for some reason this worked, while mySwiper.destroy(); did not work.
EDIT:
Since I posted originally I have gotten mySwiper.destroy(); to work properly. If anyone else is having this problem, it was due to the way I was initializing swiper. It works best to do so in a document.ready function at the end of your body code.
I have BXSlider (https://bxslider.com/) installed. Now I want the following jQuery script to run on entering a "slide".
$(document).ready(function () {
$(".next-prev-nav").fadeTo( "slow", 1 );
$(".disable-slide-nav").hide();
});
(The script enables the navigation of the slider again.)
I tried to search the website of BXslider, but I couldn't find anything about it.
Hope someone can help me out.
You are looking for either onSlideBefore (executes immediately before each slide transition) or onSlideAfter (executes immediately after each slide transition - when transition completes) depending on your needs both can be found here - look at the section Callbacks.
Here is an example:
$(function(){
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
captions: true,
slideWidth: 600,
auto: true,
pause: 1000,
onSlideBefore: function () {
console.log('onSlideBefore');
// Your code either goes here or...
},
onSlideAfter: function () {
console.log('onSlideAfter');
// Goes here...
// For example lets turn the slider off after the second slide appears
slider.stopAuto();
}
});
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div>
<div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div>
<div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>
/* Flex Slider Teaser */
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
controlNav: "thumbnails",
start: function(slider) {
jQuery( '.flexslider' ).removeClass('loading');
}
});
});
i am using flex slider but in bottom side thoumbnil images is not showing in slider .\
i checked by http://flexslider.woothemes.com/thumbnail-slider.html
but it is not working , where should i edit in js ?? my code JS code is written above.
Can you show what HTML you are using in the slider? You need a data-thumb attribute in each slide that references to the actual thumbnail images.
For example:
<li data-thumb="images/thumb1.jpg">
<img src="images/slide1.jpg" />
</li>
I have no knowlege in JS so please help me with it. I have a slider (Slider JS) I need to make the slider to stop on hovering it and when the cursor is moved away it should resume again.
I refered this slidejs website which is here and i found this code which did not work form me
$(function(){
$("#slides").slides({
hoverPause: true
});
});
Here is my JS code
jQuery.noConflict();
jQuery(function() {
jQuery(".slider_container").jCarouselLite({
btnNext: ".arrow_right",
btnPrev: ".arrow_left",
visible: 4,
speed :1000,
auto : 500,
hoverPause: true,
});
});
Html
<div id="slide_image_contener" class="slider_container">
<ul id="slide">
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
</ul>
</div>
You have error in code.
Your JS is referring to #slides:
$(function(){
$("#slides").slides({
hoverPause: true
});
});
But you are using ul id="slide"
Change this line: <ul id="slide"> to this: <ul id="slides">
The options which you are passing is wrong. You should pass pause instead of hoverPause Try the below code
jQuery(".slider_container").jCarouselLite({
btnNext: ".arrow_right",
btnPrev: ".arrow_left",
visible: 4,
speed :1000,
auto : 500,
pause: true
});
I want to use 2 jQuery Flexsliders in the jQuery tabs. The slider on the tab 1 works fine, but it does not work in the tab 2.
Here is the full demo of the code on JSFiddle:
Demo:
http://jsfiddle.net/vH5DT/
jQuery Code:
$(document).ready(function() {
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true
});
$('#flexslider1').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container1",
directionNav: true,
controlNav: true
});
$('#flexslider2').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
});
HTML:
<div id="tabvanilla">
<ul class="tabnav">
<li>Tab1</li>
<li>Tab2</li>
</ul>
<div id="tab1" class="cf">
<div id="flexslider1" class="flexslider">
<ul class="slides">
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
</div>
<div class="flex-container1"></div>
</div><!-- div#tab1 -->
<div id="tab2">
<div id="flexslider2" class="flexslider">
<ul class="slides">
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<div class="flex-container2"></div>
</div>
</div><!-- div#tab2 -->
</div><!-- div#tabvanilla -->
There are a couple possible approaches to the problem that the slider script can't act on hidden elements--either re-initialize the slider script on each tab click, or use
position: absolute;
left: -999em;
and then
left: auto;
rather than
display: none;
for the tabs.
You'll need to init your flexslider when visible (on tab change)
I think you can do something like this :
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true,
select: function(event, ui) {
switch (ui.index) {
case 0:
// nothing to do since this is selected by default on page load
break;
case 1:
$('#flexslider2').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
break;
}
}
});
I want to contribute with another solution that works fine for me.
I diving into the code and I use firebug to discover that Andres is right. The problem is because all hiddens at the beginning has their width setted to 0.
When I opened firebug everything works fine, hiddens take the right width.
Well, I do that:
I putted this piece of code after the click event and the transition:
fixWidth = $next_slide.css('width'); // I take the width of the new active slide
$flexslide_tab = $next_slide.find('.flexslider'); // Localize flexslider inside active tab
$ul = $flexslide_tab.find('.slides'); // Localize <li> container
$lis = $ul.find('li'); // Get all <li> elements
$lis.each(function(i,elem) {
$(this).css('width',fixWidth); // I adjust every <li> width from the new slide
});
I hope it will be useful.
May be this will be help for you..
Add this script to the first tab content page
$(window).load(function () {
initFlexSliders();
});
function initFlexSliders() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "fade",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function (slider) {
$('body').removeClass('loading');
}
});
$('#carousel-1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider-1'
});
$('#slider-1').flexslider({
animation: "fade",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel-1",
start: function (slider) {
$('body').removeClass('loading');
}
});
}
for other tabs insert this at the bottom of the content.
initFlexSliders();