I have an OwlCarousel with nav links within the first slide, is there a way to make the carousel return to the first slide after an event, be it a timer, or when the mouse moves out of the carousel?
Is it also possible to trigger the carousel with mousing over a link rather than clicking it?
Code snippet:
<div class="owl-carousel">
<div class="item" data-hash="slide0">
<ul>
<li><a class="button secondary url" href="#slide1">1</a></li><br/>
<li><a class="button secondary url" href="#slide2">2</a></li><br/>
<li><a class="button secondary url" href="#slide3">3</a></li><br/>
<li><a class="button secondary url" href="#silde4">4</a></li><br/>
<li><a class="button secondary url" href="#slide5">5</a></li><br/>
<li><a class="button secondary url" href="#slide6">6</a></li><br/>
</ul>
</div>
<div class="item" data-hash="slide1">
//some image
</div>
<div class="item" data-hash="slide2">
//some image
</div>
<div class="item" data-hash="slide3">
//some image
</div>
<div class="item" data-hash="slide4">
//some image
</div>
<div class="item" data-hash="slide5">
//some image
</div>
<div class="item" data-hash="slide6">
//some image
</div>
</div>
According the owlCarousel's docs you can use the to.owl.carousel function to slide to specific position.
Here is an example for both - going to the first slide (slides numbering starts with 0) and hover on the li elements to go to a specific slide on hover.
var owl;
$(document).ready(function(){
owl = $(".owl-carousel").owlCarousel({items:1});
$('#btn1').click(function() {
owl.trigger('to.owl.carousel', [0, 400]);
});
$('#ul1 li').hover(function() {
owl.trigger('to.owl.carousel', [parseInt($(this).text()) - 1, 400]);
});
});
body {
margin: 0;
padding: 0;
}
.owl-carousel .item {
height: 120px;
background: #4DC7A0;
padding: 1rem;
list-style: none;
margin: 10px;
text-align: center;
color: white;
font-size: 20px;
line-height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel">
<div class="item"> slide1 </div>
<div class="item"> slide2 </div>
<div class="item"> slide3 </div>
<div class="item"> slide4 </div>
<div class="item"> slide5 </div>
<div class="item"> slide6 </div>
<div class="item"> slide7 </div>
<div class="item"> slide8 </div>
<div class="item"> slide9 </div>
<div class="item"> slide10 </div>
<div class="item"> slide11 </div>
<div class="item"> slide12 </div>
</div>
<button id="btn1">Go to first</button>
<ul id="ul1">
<li>1</li>
<li>5</li>
<li>10</li>
</ul>
Related
I have auto-moving images as a slideshow.
Here's my code in CodePen:
https://codepen.io/Krzysiek_39/pen/poNLbgx
On my code, instead of the left arrow, I have "previous" and instead of the right arrow I have "next". Unfortunately, I don't like the round backgrounds with the words "previous" and "next".
Instead of the words "previous" (including the blue circular background) and the words "next" (including the red circular background) - I would like to have normal arrows (from another slideshow) in place of "previous" and "next".
Here is another slideshow with normal arrows:
https://www.jqueryscript.net/demo/Responsive-Infinite-jQuery-Carousel-Slider-Plugin-LoopSlider/
Can I put these normal arrows (from another slideshow) in place of "previous" and "next"?
An important issue!
I would also like "cursor: pointer" to only work when hovering over these normal arrows.
I will be very grateful for effective help.
<div class="header">
<div class="text">
<a class="refresh" title="A website refresh">Website</a>
</div>
</div>
<div class="menu-container">
<div class="menu">
<a>MENU</a>
</div>
</div>
<div class="box">
<div class="slider_wrapper">
<div class="slider">
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span>
</div>
</div>
<div class="slider_objects">
<div class="slider_btn prev_btn">previous</div>
<div class="slider_btn next_btn">next</div>
<ul class="slider_list_wrapper">
<li class="slider_list active_slide"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
</ul>
</div>
</div>
</div>
You can modify the styles to remove the round background and add HTML entity for the arrows:
HTML
<div class="slider_btn prev_btn">‹</div>
<div class="slider_btn next_btn">›</div>
CSS
.prev_btn, .next_btn {
font-size:4em;
position: absolute;
cursor: pointer;
color: #ffffff;
background:0;
}
.prev_btn {
left: 50px;
}
.next_btn {
right: 50px;
}
I'm trying to build a layout which essentially looks like this (the blue line being the scroll bar)
But with how I have it right now the lower green box goes past the total height of the entire box. I've uploaded a rough version of what I have created onto codepen, I'm using the Bulma framework and essentially I want the lower box in the second column be a height where the total height of the left column equals the height of the right column.
So I want it to end where the black line is and have a scroll bar where the right hand side is.
I can set the height of the lower box to be a specific view height which fixes it a tiny bit and just set the overflow to scroll, but it gets messed up a bit if you try to resize.
At worst, I can do this with JavaScript by making the height of the lower box equal to height of left column - height of top box but I'm trying to see if there's a better CSS way.
My solution: set .column.is-2 to flex with direction column, set #getHeight display: block and make bottom one scrollable with overflow: auto.
Codepen demo: https://codepen.io/anon/pen/ZVJdgj
html {
overflow:hidden;
}
.fullh:not(:last-child) {
margin-bottom: 0rem;
}
.fullh:last-child {
margin-bottom: 0rem;
}
.fullh{
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
}
.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
option:hover{
background-color:#F1F6FE;
}
.is-vertical-center {
display: flex;
align-items: center;
}
.component-helper {
cursor: pointer;
color: #74A2F8;
}
.component-helper:hover {
color: #504A77;
}
.column.is-2 {
display: flex;
flex-direction: column;
}
#getHeight {
display: block;
}
.column.is-2 > .scroll {
overflow: auto
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
<link rel="icon" type="image/png" href="" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="dashboard_script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<body>
<nav class="navbar is-transparent navbar-padding" role="navigation" aria-label="main navigation" style="background-color: #fafafa">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item nav-text" href="#" style="font-weight: 500;font-size: 1.5rem;color: #74A2F8;">
Test
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end nav-text">
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item" style="color:#f15870" href="/logout">
Test
</a>
</div>
</div>
</div>
</nav>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="hero is-fullheight" style="background-color: #fafafa">
<div class="columns fullh" style="height:92vh;">
<div id="heightActual" class="column is-10">
<iframe class="shadow" src="/" frameborder="0" style="width: 100%;height:100%;">
</iframe>
</div>
<div class="column is-2">
<div id="getHeight" class="columns">
<div class="column">
<div class="box is-vertical-center is-centered" style="height:100%;background-color: #fafafa;">
<div class="has-text-centered" style="margin: 0 auto;">
<ul>
<li class="component-helper" id="add">Add Components</li>
<li class="component-helper" id="edit">Edit Components</li>
<li class="component-helper" id="order">Order Components</li>
<li class="component-helper" id="order">Add pages</li>
<li class="component-helper" id="order">View Pages</li>
</ul>
</div>
</div>
</div>
</div>
<div class="columns scroll">
<div class="column">
<div id="heightFix" class="box is-vertical-center is-centered" style="background-color: #fafafa;display:block;">
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal containing all the Elements -->
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box" style="width: 100%;">
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
Hope this will help
<html><head>
<title>J.T.C.</title>
<meta charset="utf-16">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="assets/css/mainsd2B.css">
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Scroll -->
<link href="https://fonts.googleapis.com/css?family=Heebo:460|Ramabhadra|Roboto" rel="stylesheet">
<!-- Adjust top of navbar -->
<script type="text/javascript">
var sw = document.getElementById('side-menu');
window.addEventListener('resize', function(event){
sw.style.width = '0px';
});
</script>
<script type="text/javascript">
var s = document.getElementById('side-menu');
function resizeFunction() {
s.style.display = 'none';
}
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>
<script type="text/javascript">
// Reset Navbar top afer scroll
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
</script>
<script type="text/javascript">
//Control side-nav top position
$(function () {
$(document).scroll(function () {
var $nav1 = $(".side-nav-fixed-top");
$nav1.toggleClass('scrolled', $(this).scrollTop() > $nav1.height());
$nav1.visibility= "hidden";
});
});
</script>
<script type="text/javascript">
// Show Hide Navbar UL List
$(window).scroll(function(){
if($(document).scrollTop() > 200){//Here 200 may be not be exactly 200px
$('.side-nav').hide();
}
});
</script>
<style>
#media screen and (max-width: 927px) {
.navbar {
overflow: visible;
}
}
</style>
</head>
<body onresize="resizeFunction()" >
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="/assets/css/images/header46.jpg" alt=""></span>
</header>
<!-- Nav -->
<nav id="nav">
<div id="mainconm"><img src="/assets/css/images/mainltx.png" alt=""></div>
<ul>
<li>Home</li>
<li>Section One</li>
<li>Social
<ul>
<li>Section Two</li>
<li><a href="#third" class="" >Section Three</a></li>
</ul>
</li>
<li>Course
<ul>
<li>Section Four</li>
<li><a href="#fifth" class="" >Sections Five</a></li>
</ul>
</li>
</ul>
</li>
</nav>
<div id="sticky-anchor"></div>
<!-- class="navbar" -->
<nav class="navbar navbar-fixed-top" id="navigation" onscroll="navtotop()">
<span class="open-slide">
<button id="menu-box" onclick="toggle_visibility()"><svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="3"></path>
<path d="M0,14 30,14" stroke="#000" stroke-width="3"></path>
<path d="M0,23 30,23" stroke="#000" stroke-width="3"></path>
</svg></button>
</span>
<div id="side-menu" class="side-nav side-nav-fixed-top bg-primary" style="display: none; width: 0px;">
<span class="open-slide">
<div style="height:70px; width: 100%; background:rgb(6, 13, 19, 1)" >
<button id="menu-box" style=" background: #000; border-radius: 0;" onclick="toggle_visibility()"><svg width="30" height="30">
<path d="M0, 3 30,25" stroke="#fff" stroke-width="3"></path>
<path d="M0,25 60,-17" stroke="#fff" stroke-width="3"></path>
</svg>
</button>
</div>
</span>
Home
<a href="#first" class="slide" >Section One</a>
<a href="#second" class="slide" >Section Two</a>
<a href="#third" class="slide" >Section Three</a>
<a href="#forth" class="slide" >Section Four</a>
<a href="#fifth" class="slide" >Section Five</a>
<a href="#seventh" class="slide" >Section Six</a>
</div>
<div id="conm"><img src="assets/css/images/mainltx.png" alt=""></div>
</nav><div id="intro" style="position: absolute; z-index: 8000; top: 100px;"></div>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section class="main" style="padding-top: 20px !important;">
<div class="spotlight">
<div class="content">
<div id="largeicon" >
<span class="image"><img src="assets/css/images/homeimage.png" alt=""></span>
</div>
<div id="smallicon" class="alt">
<span class="logo"><img src="/assets/css/images/smallbanner.png" alt=""></span>
</div>
<header class="major">
<h3>Help us help you. Please take the surveys below.</h3>
</header>
<div style="float: clear;"></div>
</div>
</div>
</section>
<!-- First Section -->
<section id="first" class="main special">
<header class="major">
</header>
<div id="contact" class="sticky slide" >Contact Us</div>
<span class="image"><img style="width: 100%;" src="/assets/css/images/jb.png" alt=""></span>
<div id="coach" class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Second Section -->
<section id="second" class="main special apcol">
<header class="major">
<span class="image"><img style="width: 100%;" src="/assets/css/images/ps.png" alt=""></span>
<div class="center-list" style="margin-top: .05em;">
</div>
<footer class="major">
</footer>
</header></section>
<!-- Third Section -->
<section id="third" class="main special">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/lt-icon.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Forth Section -->
<section id="forth" class="main special">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/cting.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Fifth Section -->
<section id="fifth" class="main special inactive">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/vt.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
</div>
<!-- Footer -->
<div id="seventh" class="inactive"></div>
<footer id="footer">
<section>
</section>
<section>
<dl class="alt">
</section>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript">
// Toggle close with button
var s = document.getElementById('side-menu');
function toggle_visibility() {
if(s.style.width == '0px')
s.style.width = '300px';
else
s.style.width = '0px';
}
</script>
<script type="text/javascript">
// Smooth Scroll
$(document).ready(function() {
$('.slide').click(function() {
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $(link).offset().top}, 2000);
return false;
});
});
// toggle close ul after select from list
document.getElementById('side-menu').style.display = 'none';
document.getElementById('side-menu').style.width = '0';
$(function() {
$("button").click(function() {
$("#side-menu").show();
});
$("#side-menu a").on('click', function(e) {
e.stopPropagation();
$("#side-menu")
.show()
/* .siblings() */
.val($(this).html());
});
});
</script>
</body></html>
My issue is that I have to click twice in order to get the mobile drop down menu for the website to either open or close. I believe that the JavaScript and HTML is sufficient. I have not been able to modify this JavaScript so that it works properly. Nothing I have tried works. Any suggestions? I have simplified this HTML to the essentials
You have very shared very little information. Possible reason can be that s.style.width is not 0px on initiation. Thats why the first click makes it 0px and the second click opens it. Try adding s.style.width='0px' at the start of the script.
I deleted the JavaScript (// toggle close ul after select from list) that is the at the bottom of the codes since it was clashing with the javascript (// Toggle close with button), which is also located near the bottom. I then used another JavaScript similar to the JavaScript found in (// Toggle close with button) to toggle close ul after a selection is selected from the list. This solved the double clicking issue.
I'm using Bootstrap and I'm trying to use the Collapse.
I want the div #film to hide when I click the <li class="rekruterring>and I'm missing something. It won't close no matter what I do, I've tried with accordion, data-parents, javascript and nothing makes the #filmdiv hide when I click the .rekruterring and the #rekruttering div is shown.
Here's my code and be aware that the #rekruterring is expanding as it should, but is not hiding #film.
/* Latest compiled and minified JavaScript included as External Resource */
/* DOES NOTHING */
$(document).ready(function() {
$(".rekruttering").click(function() {
$("#film").collapse('hide');
});
})
/* VIMEO */
img {
max-width: 100%;
height: auto;
}
.video {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
width: 100%;
/* Thumbnails 5 across */
margin: 1%;
}
.video img {
width: 100%;
opacity: 1;
}
.video img:hover,
.video img:active,
.video img:focus {
opacity: 0.75;
}
.categories li {
list-style-type: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="accordion" class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galleri</h2>
<hr class="bg-primary">
</div>
<div class="col-lg-12 categories text-center">
<ul>
<a class="film" data-toggle="collapse" data-target="#film" data-parent="#accordion">Firmapræsentation</a> |
<a class="rekruterring" data-toggle="collapse" data-target="#rekruterring" data-parent="#accordion">Rekruterringsfilm</a> |
<li>TV -/Biografspots & Imagefilm</li>|
<li>Salgs- & Produktfilm</li>
</ul>
</div>
</div>
<div id="film" class="row text-centered collapse in">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">FILM</h2>
</article>
</div>
</div>
<!-- FILM -->
<div id="rekruterring" class="row text-centered collapse">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">REKRUTERRING</h2>
</article>
</div>
</div>
<!-- REKRUTERRING -->
</div>
This is not working because there is a Bootstrap bug/issue when using the parent class. It relies on the use of the panel class being wrapped around your collapse elements.
https://github.com/twbs/bootstrap/issues/10966
Updated JSFiddle
<div class="panel">
<div id="film" class="row text-centered collapse in">
<div class="panel">
<div id="rekruterring" class="row text-centered collapse">
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