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
});
Related
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>
I need to have a jQuery UI draggable element inside a Slick-slider. I know that jQuery UI has the handles option http://jqueryui.com/draggable/#handle but I'm not sure how to apply this to the slick-slider.
I found this SO question: jQuery UI Slider Interference with slick carousel but it's using jQuery UI's slider option. When I did something similar on my example I was able to disable the slick-slider dragging... But my draggable elements still aren't draggable.
JSfiddle: http://jsfiddle.net/NateW/u1burczm/
How do I disable dragging on the Slick-slider only when it's inside one of my draggable elements and still have the draggable elements draggable?
HTML:
<div class="wrapper-slider">
<div>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="draggable" class="ui-widget-content">
<p>and me!</p>
</div>
</div>
<div><h3>1</h3><h3>1</h3><h3>1</h3></div>
<div><h3>2</h3><h3>2</h3><h3>2</h3><h3>2</h3></div>
<div><h3>3</h3><h3>3</h3></div>
</div>
JS:
$('.wrapper-slider').slick({
dots: false,
infinite: false,
centerPadding: "20px",
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
$(function() {
$( ".draggable-element" ).draggable();
});
$(".draggable-element").on("draggable mouseenter mousedown",function(event){
event.stopPropagation();
});
for that to work you need to unbind the dragstart event registered by slick slider like follow before binding the draggble to element
$('.wrapper-slider').slick({
dots: false,
infinite: false,
centerPadding: "20px",
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
$(function() {
$('*[draggable!=true]','.slick-track').unbind('dragstart');
$( ".draggable-element" ).draggable();
});
$(".draggable-element").on("draggable mouseenter mousedown",function(event){
event.stopPropagation();
});
here is working jsfiddle
http://jsfiddle.net/samcoolone70/u1burczm/3/
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;
}
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();
I have this javascript code :
$(function(){
$('.words-gallery div:gt(0)').hide();
setInterval(function() {
$('.words-gallery > div:first')
.fadeOut(1000)
.next()
.delay(995)
.fadeIn(1000)
.end()
.appendTo('.words-gallery');},
3000);
});
This code will make a gallery from DIVs and every 3000 will hide the current DIV and show the next one.
I was trying to add next & back buttons but it's not working with me.
here is my fiddle:
http://www.jsfiddle.net/jUrNx
Any idea how to do it?
Why not use the jQuery Cycle plugin? It will let you do everything you're asking and more. There is even a specific example using "next/prev".
Here is a working fiddle: http://jsfiddle.net/3Qz5T/
Essentially, you would set up your code as follows:
HTML
<div class="nav"><a id="prev2" href="#">Prev</a> <a id="next2" href="#">Next</a></div>
<div class="words-gallery">
<div>1</div>
<div>22</div>
<div>333</div>
</div>
JS
$('.words-gallery').cycle({
fx: 'fade',
speed: 'fast',
timeout: 3000,
next: '#next2',
prev: '#prev2'
});