I was setting up a slideshow using the first version of cycle and then thought I'd update to the newest version, but once I linked the file, my slideshow broke. I'm not sure why it is working in version 1 but not 2. I even get a console message : [cycle2] --c2 init-- .
Ideas?
HTML:
<div class="row">
<div class="span1">
<div class="chevron">
<i class="icon-chevron-left"></i>
</div>
</div>
<div class="span8">
<div class="slide-show-container noselect">
<div class="slide">
<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" />
</div>
<div class="slide">
<div id="highcharts01"> </div>
</div>
<div class="slide">
<div id="highcharts02"> </div>
</div>
<div class="slide">
<img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/08/Landscape-wallpapers-1.jpeg" />
</div>
</div>
</div>
<div class="span1">
<div class="chevron">
<i class="icon-chevron-right"></i>
</div>
</div>
</div>
<div class="row" id="slideNav">
<div class="offset1 span8 noselect" id="circleNav">
</div>
</div>
JS:
$('.slide-show-container').cycle({
fx: 'fade',
speed: 500,
timeout: 0,
next: ".icon-chevron-right",
prev: ".icon-chevron-left",
pager: "#circleNav",
after: initCharts
});
What are the differences between your code, and the one below?
Deleted after: initCharts and timeout: 0 from your JS.
Added jquery.cycle.all.js and jquery.min.js
Added position: relative; to .slide-show-container
Added position: absolute; and z-index: 5; for images
It's working now, however I guess your pagers won't show up because I don't have the CSS containing the images for divs.
$(document).ready(function() {
$('.slide-show-container').cycle({
fx: 'fade',
speed: 500,
next: ".icon-chevron-right",
prev: ".icon-chevron-left",
pager: "#circleNav"
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="row">
<div class="span1">
<div class="chevron">
<i class="icon-chevron-left"></i>
</div>
</div>
<div class="span8">
<div class="slide-show-container noselect" style="position: relative;">
<div class="slide">
<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" width="180" height="180" style="position: absolute; z-index: 5;"/>
</div>
<div class="slide">
<div id="highcharts01"> </div>
</div>
<div class="slide">
<div id="highcharts02"> </div>
</div>
<div class="slide">
<img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/08/Landscape-wallpapers-1.jpeg" width="180" height="180" style="position: absolute; z-index: 5;"/>
</div>
</div>
</div>
<div class="span1">
<div class="chevron">
<i class="icon-chevron-right"></i>
</div>
</div>
</div>
<div class="row" id="slideNav">
<div class="offset1 span8 noselect" id="circleNav" >
</div>
</div>
Hope that someway I could help with this, also you wanted something like this.
Related
I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})
dears friends.
I found this photo gallery ins this site: http://playgallery.siteseguro.ws/
I would like to use it but the play and pause button don't get anywhere. The buttons are not working and I don't see any code to make this work.
Is it possible to make this work? Below is the optimized code:
<html>
<head>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-bootstrap.css"/>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-style.css"/>
<link rel='stylesheet' id='fontawesome-css' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
</head>
<body>
<div class="col-slick-4">
<div class="slick-gallery">
<div class="slick-slider carousel-child" id="child-carousel" data-for=".carousel-parent" data-arrows="true" data-loop="false" data-dots="false" data-swipe="true" data-items="4" data-xs-items="4" data-sm-items="4" data-md-items="4" data-lg-items="5" data-slide-to-scroll="1">
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s1.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s2.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s3.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s4.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s5.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s6.jpg"/>
</div>
</div>
</div>
</div>
<div class="slick-controls">
<div class="slick-controls-pause"><span class="fa fa-pause"></span></div>
<div class="slick-controls-play"><span class="fa fa-play"></span></div>
</div><br><br>
<div class="slick-slider carousel-parent" data-arrows="false" data-loop="false" data-dots="false" data-swipe="true" data-items="1" data-child="#child-carousel" data-for="#child-carousel" data-lightgallery="group">
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s1.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s2.jpg" height="480" /></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s3.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s4.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s5.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s6.jpg" alt="" height="480"/></div>
</div>
</div>
</div> <!-- /col-slick-4 -->
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-core.min.js"></script>
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-script.js"></script>
</body>
</html>
you would have to add some jquery
$('.slick-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
pauseOnDotsHover:false,
autoplaySpeed:500,
dots: false,
arrows: false,
infinite: true
});
$('#pause').click(function() {
$('.slick-slider').slick('slickPause');
});
$('#play').click(function() {
$('.slick-slider').slick('slickPlay');
});
And then edit your buttons to have an id of pause and play respectively and remove the a tag
<div class="slick-controls">
<div class="slick-controls-pause slick-play"><span id="pause" class="fa fa-pause"></span></div>
<div class="slick-controls-play slick-play"><span id="play" class="fa fa-play"></span></div>
</div><br><br>
If you want to keep the pointer on hover. Instead of using an a tag. Use cursor: pointer; on your .slick-play
I have the following OWL Carousel 2 initialization code:
$(document).ready(function(){
moment.locale('nl-NL');
$("#owl-slider").owlCarousel({
items: 1,
responsive: false,
nav : false,
loop: false,
dots: true,
dotsEach: 1,
autoplaySpeed : 300,
dotsSpeed : 400,
autoPlay: true,
navRewind: true,
animateOut: 'fadeOut'
});
});
This results in the following html of the carousel:
<div class="item-list" id="newsblock">
<div id="owl-slider" class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-934px, 0px, 0px); transition: 0s; width: 1401px;">
<div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nieuwsbericht" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nieuwsbericht.aspx" rel="bookmark">Nieuwsbericht</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div><div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/8628PEPERNOTEN-550X485.JPG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nog meer nieuws" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nog-meer-nieuws.aspx" rel="bookmark">Nog meer nieuws</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
<div class="owl-item active" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Test" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/test.aspx" rel="bookmark">Test</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
</div>
</div><div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style="display: none;">prev</div>
<div class="owl-next" style="display: none;">next</div>
</div>
<div class="owl-dots" style="">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot active"><span></span></div>
</div>
</div>
</div>
</div>
The problem is that the width of the owl-stage div is set to the width of all three items instead of 1. All items are shown instead of 1.
Please provide some guidance on what could be the solution!
Kind Regards.
I solved my problem by adding this code to css:
.owl-item {
float: left;
}
.owl-carousel {
overflow: hidden;
}
Add singleItem:true to your javascript.
This will make it display only a single image at a time.
The width of the owl stage div will always extend past the parent carousel container (div id="owl-slider" class="owl-carousel owl-theme") if there is more than one item in the carousel. This is easily fixed by setting overflow to hidden in your CSS.
.owl-carousel {
overflow: hidden;
}
I am having trouble to get the Owl Carousel Theme stylesheets to have any effect on my sliders?
I am using the latest version owl.carousel.2.0.0-beta.3
Here is my test site: example website
Here is the HTML code related to owl carousel:
<div id="owl-single" class="owl-carousel col-xs-12 owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-1396px, 0px, 0px); transition: 0s; width: 4886px;">
<div class="owl-item cloned" style="width: 698px;">
<div class="item">
<img src="img/slide2.jpg" alt="GTA V">
</div>
</div>
<div class="owl-item cloned" style="width: 698px;">
<div class="item">
<img src="img/slide3.jpg" alt="Mirror Edge">
</div>
</div>
<div class="owl-item active" style="width: 698px;">
<div class="item">
<img src="img/slide1.jpg" alt="The Last of us">
</div>
</div>
<div class="owl-item" style="width: 698px;">
<div class="item">
<img src="img/slide2.jpg" alt="GTA V">
</div>
</div>
<div class="owl-item" style="width: 698px;">
<div class="item">
<img src="img/slide3.jpg" alt="Mirror Edge">
</div>
</div>
<div class="owl-item cloned" style="width: 698px;">
<div class="item">
<img src="img/slide1.jpg" alt="The Last of us">
</div>
</div>
<div class="owl-item cloned" style="width: 698px;">
<div class="item">
<img src="img/slide2.jpg" alt="GTA V">
</div>
</div>
</div>
</div>
<div class="owl-nav">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
The stylesheet called "owl.theme.default.min.css" looks like it contains all the Navigation stylesheets but it's not styling the PREV and NEXT buttons for some reason?
Any help would be appreciated.
you are missing a class, owl-theme, related to the owlcarousel theme in your html declaration:
<div id="owl-single" class="owl-carousel col-xs-12 owl-loaded owl-drag">
should be:
<div id="owl-single" class="owl-carousel owl-theme col-xs-12 owl-loaded owl-drag">
I tried it adding the missing class directly into the browser inspector, now your page looks like this:
I'm trying to make a slider with jQuery Cycle where, when you click on one of 5 thumbnails, you switch to the right slide in the slider. Those thumbs are external to the slider.
Thing is, for some reason, the startingSlide argument doesn't work and just doing .cycle(number) doesn't either, even if the slider is clearly running. Here's a peek at the code:
JS
jQuery(document).ready(function(){
var current_slide;
jQuery('#slider_accueil').cycle({
fx: 'fade',
timeout: 3000,
after: onAfter,
startingSlide: 0,
pager: '#nav',
next: '.next_btn_slider',
prev: '.prev_btn_slider'
});
function onAfter(curr,next,opts){
jQuery('.indicator').removeClass('current')
current_slide=opts.currSlide + 1
jQuery('#thumb'+current_slide+' .indicator').addClass('current')
}
jQuery('#thumb1').click(function(){
jQuery('#slider_accueil').cycle(0);
return false;
})
jQuery('#thumb2').click(function(){
jQuery('#slider_accueil').cycle(1);
return false;
})
jQuery('#thumb3').click(function(){
jQuery('#slider_accueil').cycle(2);
return false;
})
jQuery('#thumb4').click(function(){
jQuery('#slider_accueil').cycle(3);
return false;
})
jQuery('#thumb5').click(function(){
jQuery('#slider_accueil').cycle(4);
return false;
})
})
html
<div id="sliderAccueil">
<div id="nav" style="display:none;"></div>
<img src="/wp-content/themes/customtheme/images/slider_previous.png" class="prev_btn_slider">
<img src="/wp-content/themes/customtheme/images/slider_next.png" class="next_btn_slider">
<div id="slider_accueil" style="position: relative;">
<div style="position: absolute; top: 0px; left: 0px; z-index: 5; opacity: 0; display: none;">
<img src="/wp-content/uploads/2011/09/slider1.jpg">
<div>
<div class="maintext">
<h2>Slide 1</h2>
<p>Slide 1</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><ig src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 4; display: none; opacity: 0;">
<ig src="/wp-content/uploads/2011/09/slider2.jpg">
<div>
<div class="maintext">
<h2>Slide 2</h2>
<p>Slide 2</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 3; display: block; opacity: 0.942616;">
<img src="/wp-content/uploads/2011/09/slider3.jpg">
<div>
<div class="maintext">
<h2>Reprise des travaux majeurs</h2>
<p>Slide 3</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 2; display: block; opacity: 0.0573843;">
<img src="/wp-content/uploads/2011/09/slider4.jpg">
<div>
<div class="maintext">
<h2>Slide 4</h2>
<p>Slide 4</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 1; display: none; opacity: 0;">
<img src="/wp-content/uploads/2011/09/slider5.jpg">
<div>
<div class="maintext">
<h2>Slide 5</h2>
<p>Slide 5</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
</div>
<div id="thumbnails_slider_accueil">
<ul>
<li>
<b id="thumb1" href="#1">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb1.png)" class="thumbnail">
<p>Voies retranchées trains ajoutés</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb2" href="#2">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb2.jpg)" class="thumbnail">
<p>Événements</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb3" href="#3">
<div class="indicator current"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb3.jpg)" class="thumbnail">
<p></p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb4" href="#4">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb4.jpg)" class="thumbnail">
<p>Appels d'offres</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb5" href="#5">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb5.jpg)" class="thumbnail">
<p>Environnement</p>
</div>
<div class="clear"></div>
</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
^check source, seems I cant put that cleaner than this.
Anybody have an idea?
PS, It's on purpose that all img are ig and all links are ... Stackoverflow wouldn't let me post.
I found the answer to my own question...
Seems that to use jQuery('#slider_accueil').cycle(0); you need to have the full version linked, and not the lite.
Seems like that function is one of those who have been taken out from the conversion from full to lite... Note to self: The lite versions may not have the function you want to do... just spent 2 hours trying all kinds of stuff on that. :p