Hiding custom buttons with Slick Scroller Carousel

Hiding custom buttons with Slick Scroller Carousel - javascript

I need to be able to hide the previous button when on the first slide or the next button when on the last slide of the Slick Scoller Carousel.
However I cannot seem to find a way to do this with custom buttons.
Code currently:
<div class="myscroller">
<div class="item"
<p>SLIDE 1</p>
</div>
<div class="item"
<p>SLIDE 2</p>
</div>
<div class="item"
<p>SLIDE 3</p>
</div>
</div>
<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>
<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>
<script type="text/javascript">
$(document).ready(function(){
$('.myscroller').slick({
infinite: false,
arrows: false
});
});
function myPrev(){
$('.myscroller').slick('slickPrev');
}
function myNext(){
$('.myscroller').slick('slickNext');
}
</script>
I've tried using some css styling but to no avail. One post claimed to use this in the css, but it didnt work:
<style>
.slick-arrow[aria-disabled="true"]{
opacity: 0;
}
</style>
Any suggestions would be appriciated.

You can achieve this by using some js code ,
assign a click listner on button then check wether ist's in the first or last slide ( .first / last ().hasClass("slick-current");), to enable or disable buttton
See below snippet :
$(function() {
$('.myscroller').slick({
infinite: false,
arrows: false
});
$("#left").hide()
$(".slick-arrow").on("click", function() {
var isFirst = $(".slick-slide").first().hasClass("slick-current");
var isLast = $(".slick-slide").last().hasClass("slick-current");
isFirst ? $("#left").hide() : $("#left").show();
isLast ? $("#right").hide() : $("#right").show();
});
});
function myPrev() {
$('.myscroller').slick('slickPrev');
}
function myNext() {
$('.myscroller').slick('slickNext');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<div class="myscroller">
<div class="item">
<p>SLIDE 1</p>
</div>
<div class="item">
<p>SLIDE 2</p>
</div>
<div class="item">
<p>SLIDE 3</p>
</div>
</div>
<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>
<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>

Try this
$(document).ready(function(){
$('.myscroller').slick({
infinite: false,
arrows: true,
prevArrow:'<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>',
nextArrow:'<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>',
});
});
.myscroller
{
position: relative;
padding-bottom: 50px;
}
.slick-arrow
{
position: absolute;
bottom: 0;
}
#left.slick-arrow
{
left: 0;
}
#right.slick-arrow
{
right: 0;
}
.slick-arrow.slick-disabled
{
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<div class="myscroller">
<div class="item">
<p>SLIDE 1</p>
</div>
<div class="item">
<p>SLIDE 2</p>
</div>
<div class="item">
<p>SLIDE 3</p>
</div>
</div>

Related

Slick.js syncing multiple slider navs

I have an event website where I want to display 12 events with slider. I want two sections (speakers and schedule) to act as slider showing single event content and using slider navigation (with arrows and numbers) to control both of them.
Using Slick.js I was able to achieve this with single slider nav, but when I duplicate the slider nav - one slider nav didn't work correctly (arrows work but numbers don't).
Is there a way to in Slick.js to set this to work, or if there isn't can someone help me get workaround with JavaScript/jQuery?
Demo can be tested here:
demo
Here is my code:
$('.slickSliderWrap').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
adaptiveHeight: true,
asNavFor: '.day-wrap'
});
$('.day-wrap').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slickSliderWrap',
centerMode: true,
centerPadding: '10px',
prevArrow: '.dayArrow--left',
nextArrow: '.dayArrow--right',
focusOnSelect: false
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="speakers">
<div class="agenda-wrap">
<div class="nav-wrap">
<button class="dayArrow dayArrow--left">
</button>
<div class="day-nav">
<div class="day-wrap slider-nav">
<button class="btn-day active">E01</button>
<button class="btn-day">E02</button>
<button class="btn-day">E03</button>
<button class="btn-day">E04</button>
<button class="btn-day">E05</button>
<button class="btn-day">E06</button>
<button class="btn-day">E07</button>
<button class="btn-day">E08</button>
<button class="btn-day">E09</button>
<button class="btn-day">E10</button>
<button class="btn-day">E11</button>
<button class="btn-day">E12</button>
</div>
</div>
<button class="dayArrow dayArrow--right">
</button>
</div>
</div>
<div class="speaker-list-wrap slickSliderWrap">
<!-- event 01 list -->
<div class="speaker-list">
<!-- speaker item -->
<!-- speaker item -->
...
<!-- speaker item -->
</div>
<!-- event 02 list -->
<div class="speaker-list">
<!-- speaker item -->
<!-- speaker item -->
...
<!-- speaker item -->
</div>
...
<!-- event 12 list -->
<div class="speaker-list">
<!-- speaker item -->
<!-- speaker item -->
...
<!-- speaker item -->
</div>
</div>
</div><!-- /speakers -->
<div id="schedule">
<div class="agenda-wrap">
<div class="nav-wrap">
<button class="dayArrow dayArrow--left">
</button>
<div class="day-nav">
<div class="day-wrap slider-nav">
<button class="btn-day active">E01</button>
<button class="btn-day">E02</button>
<button class="btn-day">E03</button>
<button class="btn-day">E04</button>
<button class="btn-day">E05</button>
<button class="btn-day">E06</button>
<button class="btn-day">E07</button>
<button class="btn-day">E08</button>
<button class="btn-day">E09</button>
<button class="btn-day">E10</button>
<button class="btn-day">E11</button>
<button class="btn-day">E12</button>
</div>
</div>
<button class="dayArrow dayArrow--right">
</button>
</div>
</div>
<div class="agenda-content-window">
<div class="agenda-content-wrap slickSliderWrap">
<!-- event 01 list -->
<div class="agenda">
<!-- agenda item -->
<!-- agenda item -->
...
<!-- agenda item -->
</div>
<!-- event 02 list -->
<div class="agenda">
<!-- agenda item -->
<!-- agenda item -->
...
<!-- agenda item -->
</div>
...
<!-- event 12 list -->
<div class="agenda">
<!-- agenda item -->
<!-- agenda item -->
...
<!-- agenda item -->
</div>
</div>
</div><!-- /schedule -->

I played around a bit and came up with a working version. I wanted to trim it down to make for a simpler example, so it only includes one set of nav & speakers.
$(function() {
$('.day-wrap').slick({
slidesToShow: 3,
slidesToScroll: 1,
centerPadding: '10px',
centerMode: true,
prevArrow: '.dayArrow--left',
nextArrow: '.dayArrow--right',
asNavFor: '.speaker-list-wrap'
});
$('.speaker-list-wrap').slick({
slidesToShow: 1,
arrows: false
});
// asNavFor works when scrolling
// Add onclick to buttons to navigate speakers
$('.btn-day').on('click', function() {
$('.speaker-list-wrap').slick('slickGoTo', $(this).attr('data-slick-index'));
});
});
#speakers,
.speaker-list,
.nav-wrap {
width: 300px;
}
.day-wrap {
width: 300px;
overflow: hidden;
}
.speaker-list,
.speaker-list-wrap,
.speaker-list-item {
width: 300px;
}
.speaker-list {
margin-top: 30px;
height: 40px;
border: 1px solid gray;
}
.speaker-list-wrap {
overflow: hidden;
}
.speaker-list-item {
float: left;
}
.btn-day {
width: 50px;
height: 20px;
float: left;
border: 1px solid blue;
margin: 0 5px;
text-align: center;
}
.btn-day.slick-current {
color: white;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.0/slick.min.js"></script>
<html>
<head></head>
<body>
<div id="speakers">
<div class="agenda-wrap">
<div class="nav-wrap">
<button class="dayArrow dayArrow--left"><</button>
<div class="day-nav">
<div class="day-wrap slider-nav">
<div class="btn-day active">E01</div>
<div class="btn-day">E02</div>
<div class="btn-day">E03</div>
<div class="btn-day">E04</div>
<div class="btn-day">E12</div>
</div>
</div>
<button class="dayArrow dayArrow--right">></button>
</div>
</div>
<div class="speaker-list">
<div class="speaker-list-wrap">
<div class="speaker-list-item">Speaker 1</div>
<div class="speaker-list-item">Speaker 2</div>
<div class="speaker-list-item">Speaker 3</div>
<div class="speaker-list-item">Speaker 4</div>
<div class="speaker-list-item">Speaker 12</div>
</div>
</div>
</div>
<!-- /speakers -->
</body>
</html>

JavaScript Fade In Not Working Correctly - 2 of 4 divs fade in correctly

I just need each div to fade in once, doesn't need to fade out. Only .landing and .about fade in. .images and .contact don't fade in at all, but I can still click the invisible button on the .images div. If you need my CSS for the ids, please let me know. I'm still a JavaScript beginner, so this could be an easy fix.
<div class="landing">
<div class="content" id="fadein"> <!-- "fadein" is for my onload function -->
<div class="header">
<h1 style="margin: 0;">Placeholder</h1>
<h4 style="margin: 0;">Placeholder</h4>
</div>
<div class="down">
<a href="#about">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="about"></a>
<div class="wrapper">
<div class="content" id="fadeinclick">
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<div class="down">
<a href="#images">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="images"></a>
<div class="wrapper">
<div class="content" id="fadeinclick"> <!-- first div that won't fade in -->
<h3>Images</h3>
<div class="activity">
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
</div>
<div class="down">
<a href="#contact">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="contact"></a>
<div class="wrapper">
<div class="content" id="fadeinclick"> <!-- second div that won't fade in -->
<h3>Contact</h3>
<div class="activity">
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
</div>
</div>
</div>
<!-- Fade scripts -->
<script>
window.onload = function() {
document.getElementById("fadein").style.opacity = 1;
}
</script>
<script>
window.onclick = function() {
document.getElementById("fadeinclick").style.opacity = 1;
}
</script>

opacity isn't a child of style, but rather a property. Just do
elem.style = "opacity:100%"
But keep in mind it won't fade. My advice?
var fade = 0
var elem = document.getElementById('imageId')
rate = 1
function step() {
fade = fade + 1
}
function start() {
if (fade < 100) {
step()
setInterval(function() {start}, rate)
};
};

How associate slideToggle with an animated and automatic scroll to a reach the matching DIV?

I have several hidden DIVs and I want to animate the slideToggle. All buttons get links to scroll to the matching DIV.
The problem is when I click on the button the scroll is stopped before reaching the DIV. So how can I do to complete and animate the scroll (i.e slow scroll) with .slideToggle?
$(document).ready(function() {
$(".menu").hide();
$(".tog").click(function() {
$(".menu:visible").toggle();
if (!$("." + $(this).data('id')).is(':visible')) {
$("." + $(this).data('id')).slideToggle();
}
});
});
.edsContenu {
padding: 5px;
text-align: center;
background-color: #00011f;
display: none;
height:200px;
}
.bridgeContenu{
padding: 5px;
text-align: center;
background-color: #00011f;
display: none;
height:200px;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div id="discovered">
<div id="file" class="container">
<a href="#edsContenu" class="tog" data-id="edsContenu" id='showEDS'> <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" /></a>
</div>
<div id="file" class="container">
<a href="#bridgeContenu" class="tog" data-id="bridgeContenu" id='showBridge'><input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" /></a>
</div>
<div id="edsContenu" class="menu edsContenu">
<section id="content">
<div id="text">
</div>
</section>
</div>
<div id="bridgeContenu" class="menu bridgeContenu">
<section id="content">
<div id="text">
</div>
</section>
</div>

Made some changes to the code, read the comment
$(document).ready(function() {
$(".menu").hide();
$(".tog").click(function() {
var id = "#" + $(this).data('id')
// hide all menu except the current one, otherwise using
// $(".menu:visible").hide() and using $(id).is(':hidden') after is really pointless
$(".menu:visible:not('"+id+"')").toggle();
if ($(id).is(':hidden')) {
$(id).toggle("fast", function(){
// after toggle is finished then animate scrollto
$("html, body").animate({ scrollTop: $(id).offset().top }, 1000);
});
}
});
});
.menu{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="discovered">
<div id="file" class="container">
<a href="#research" class="tog" data-id="edsContenu" id='showEDS'> <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" /></a>
</div>
<div id="file" class="container">
<a href="#research" class="tog" data-id="bridgeContenu" id='showBridge'><input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" /></a>
</div>
<div id="edsContenu" class="menu edsContenu">
<section id="content">
<div id="text">
test edsContenu
</div>
</section>
</div>
<div id="bridgeContenu" class="menu bridgeContenu">
<section id="content">
<div id="text">
test bridgeContenu
</div>
</section>
</div>

click on div 1, open new content. click on div 2 open content of div1

I have a lots of boxes with different content.
If you click on the first box, you can see a popup-box with more details.
If you click on the second, third, etc. boxes you have to see the details of the boxes.
My problem: If I click on box no. 2 I see the details of box no. 1.
HTML:
<div id="fade" class="black_overlay"></div>
<div id="openDiv" class="openDiv case1 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 1! More Stuff. Say Hello!</p>
Close
</div>
q</div>
<div id="openDiv" class="openDiv case2 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 2! More Stuff. Say Hello!</p>
Close
</div>
</div>
Jquery:
function clickCase() {
$(".openDiv").click(function() {
$("#light").toggle();
$("#fade").toggle();
});
$("#closeDiv").click(function() {
$("#light").toggle();
$("#fade").toggle();
});
}
Here is the whole code: http://jsfiddle.net/jvynbq1u/

Just update function
function clickCase() {
$(".openDiv").click(function() {
$(this).find("#light").toggle();
$("#fade").toggle();
});
$(".closeDiv").click(function() {
$(this).find("#light").toggle();
$("#fade").toggle();
}); }
and change classes in HTML to close
<div id="openDiv" class="openDiv case1 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 1! More Stuff. Say Hello!</p>
Close
</div>
</div>
<div id="openDiv" class="openDiv case2 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 2! More Stuff. Say Hello!</p>
Close
</div>
</div>
and don't forget to add "closeDiv" into class of elements with this ID. It is working for me on JSFiddle. http://jsfiddle.net/jvynbq1u/9/
Please also use classes, when you want to add one function on more elements, not id. One specific ID should be only for one element on page.

You should be use with different id. those id's are same as unique id.
Try this code and check with my demo:
<div id="fade" class="black_overlay"></div>
<div id="openDiv1" class="openDiv case1 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light1" class="white_content">
<p>Case 1! More Stuff. Say Hello!</p>
Close
</div>
</div>
<div id="openDiv2" class="openDiv case2 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light2" class="white_content">
<p>Case 2! More Stuff. Say Hello!</p>
Close
</div>
</div>
function clickCase() {
$("#openDiv1").click(function() {
$("#light1").toggle();
$("#fade").toggle();
});
$("#openDiv2").click(function() {
$("#light2").toggle();
$("#fade").toggle();
});
}
jQuery(document).ready(function() {
clickCase();
});
Demo jsfiddle

You can use conditional ternary operator.
function clickCase() {
$(".openDiv").click(function() {
($(this).attr('id') == "openDiv") ? $("#light").toggle() : $("#light1").toggle();
$("#fade").toggle();
});
$("#closeDiv, #closeDiv1").click(function() {
($(this).attr('id') == ("openDiv" || "closeDiv")) ? $("#light").toggle() : $("#light1").toggle();
$("#fade").toggle();
});
}
jQuery(document).ready(function() {
clickCase();
});
.openDiv {
width: 200px;
height: 200px;
float: left;
margin: 5px;
padding: 5px;
}
.case1 {
background-color: #00b5b5;
}
.case2 {
background-color: #4c4c4c;
color: white;
}
.black_overlay {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1001;
opacity: 0.8;
}
.white_content {
color: #292929;
display: none;
position: fixed;
top: 15%;
left: 10%;
width: 80%;
height: 70%;
padding: 5px 10px;
background-color: white;
z-index: 1002;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fade" class="black_overlay"></div>
<div id="openDiv" class="openDiv case1 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 1! More Stuff. Say Hello!</p>
Close
</div>
</div>
<div id="openDiv1" class="openDiv case2 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light1" class="white_content">
<p>Case 2! More Stuff. Say Hello!</p>
Close
</div>
</div>
In the case of multiple elements you can use ternary chaining
Example:
$(this).attr('id') == "openDiv") ? $("#light").toggle() :
$(this).attr('id') == "openDiv1" ? $("#light1").toggle() :
$(this).attr('id') == "openDiv2" ? $("#light2").toggle() :
$("#light3").toggle();// keep expanding till you reach enough.
It is also a good idea to save $(this).attr('id') in a variable if you need to check multiple elements.
Alternatively you could use a switch case.
Example:
switch($(this).attr('id')){
case "openDiv": $("#light").toggle(); break;
case "openDiv1": $("#light1").toggle(); break;
//go on for how many you would need.
}
Note: I have made the id's unique.

Jquery Cycle2 not initializing

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.

Develop Reference

JavaScript is the programming language of the Web.

Hiding custom buttons with Slick Scroller Carousel - javascript

Related

Slick.js syncing multiple slider navs

JavaScript Fade In Not Working Correctly - 2 of 4 divs fade in correctly

How associate slideToggle with an animated and automatic scroll to a reach the matching DIV?

click on div 1, open new content. click on div 2 open content of div1

Jquery Cycle2 not initializing

Categories

Resources