I'm trying to display the nav buttons outside the swiper container, because of the container overflow: hidden i had to create a wrap with position: relative and position the buttons absolutely.
That worked, the problem is that now the nav buttons control all sliders and i can't figure out a way to solve this.
I don't want to initialize multiple sliders with different classes if the slider is the same with different content.
JSFiddle
var sliderProdutosDestaque = new Swiper('.slider-produtos-destaque.swiper-container', {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
}
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
Easy, tiny and tidy.
document.querySelectorAll('.swiper-container').forEach(function(elem) {
new Swiper(elem, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: elem.nextElementSibling.nextElementSibling,
prevEl: elem.nextElementSibling,
}
});
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
A possible solution is to loop through the elements that contain the slider container, and then grabbing the elements that are required (Swiper, Next Btn, Prev Btn) and using this in the setup for the Swiper.
var x = document.getElementsByClassName("slider-produtos-wrap");
for(var i = 0; i < x.length; i++) {
var el = x[i];
var swiper = el.getElementsByClassName("swiper-container")[0];
var nx = el.getElementsByClassName("swiper-next")[0];
var pr = el.getElementsByClassName("swiper-prev")[0];
new Swiper(swiper, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: nx,
prevEl: pr
}
});
}
JSFiddle
Another way for anyone that might find it useful. Pass in count as a props with a different value for each slider. I did count="1" and count="2". This gives each sliders navigation arrows a different class so they will work independently of each other
<div :class="'swiper-button-prev-' + count" slot="button-prev"></div>
<div :class="'swiper-button-next-' + count" slot="button-next"></div>
props: ['count'],
data() {
return {
swiperOption: {
slidesPerView: 'auto',
spaceBetween: 45,
grabCursor: true,
centerInsufficientSlides: true,
navigation: {
nextEl: `.swiper-button-next-${this.count}`,
prevEl: `.swiper-button-prev-${this.count}`
}
}
}
.swiper-container {
width: 100%;
height: 400px;
padding: 0 50px;
}
.swiper-container::before{
content: "";
display: block;
background: #fff;
left: 0;
position: absolute;
top: 0;
height: 400px;
width: 40px;
z-index: 9;
}
.swiper-container::after{
content: "";
display: block;
background: #fff;
right: 0;
position: absolute;
top: 0;
height: 400px;
width: 40px;
z-index: 9;
}
Related
I created an auto sliding carousel using swiper js. Now I want to restart the carousel from beginning by clicking a button. How can I do it? Please help.
var swiper2 = new Swiper(".lawnsArtificialTurfSlider", {
initialSlide: 0,
spaceBetween: 10,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
navigation: {
nextEl: ".hero-slider-next",
prevEl: ".hero-slider-prev",
}
});
<button onclick="resetSlider()">Reset</button>
const resetSlider = () => { swiper2.reset(); }
On click slide to slide 0 (start) by slideTo method.
/* swiper.slideTo(index, speed, runCallbacks) */
swiper.slideTo(0);
Speed 0 (Moves without animation):
/* swiper.slideTo(index, speed, runCallbacks) */
swiper.slideTo(0,0);
Snippet:
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
/* click event */
document.getElementById("restart").addEventListener("click", restart);
function restart() {
swiper.slideTo(0);
}
html,
body {
position: relative;
height: 100%;
}
#restart{
background: blue;
color: white;
font-size: 2rem;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<button id="restart">Restart</button>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
</script>
I'd like to add padding to the slide, Swiper offers the parameter spaceBetween for outside the slide ( the wrapper gap ). Now I need padding inside the slide, I've tried adding the padding to .swiper-slide but it broke the whole structure of the swiper.
const swiper = new Swiper('.swiper', {
loop: true,
slidesPerView: 2,
spaceBetween: 30
});
.swiper {
width: 300px;
height: 150px;
background-color: gray;
}
.swiper-slide {
padding: 15px;
background-color: green;
color: white;
}
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
you should give padding and box-sizing: border-box; to your .swiper-slide
do this :
const swiper = new Swiper('.swiper', {
loop: true,
slidesPerView: 2,
spaceBetween: 30
});
.swiper {
width: 100%;
height: 150px;
background-color: gray;
}
.swiper-slide {
background-color: green;
position:relative;
color: white;
padding:20px;
box-sizing: border-box;
}
.padding{
max-width:100%;
background:red;
}
.swiper-wrapper{
width: 100%;
height: 100%;
}
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="padding">Slide 1</div>
<div>example 1</div>
<div>example 2</div>
<div>example 3</div>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
I'm new to JavaScript so have come up with this code through reading other posts here but I am having trouble making it work on my site (FYI I am building on Webflow).
What I want to do is this:
Example
I've designed a carousel where if you click the text triggers on the left side then it will display different content on the right side container. The display of different information is based on CSS3 interactions that toggle the display attribute, not JavaScript.
So if Element B is displayed on the webpage, then Element A will have a bold font weight, be a darker grey, and have a blue border on the side to indicate that is the active trigger.
Here is an example of my code (since I build on Webflow, I'm recreating the html and css here myself):
var elemB = document.getElementById("element-b");
var elemA = document.getElementById("element-a");
if (elemB.style.display = "inline-block") {
elemA.style.color = "#505050";
elemA.style.font - weight = "extra-bold";
elemA.style.border - right = "6px solid #01aae4";
} else {
elemA.style.color = "#878787";
}
.carousel {
position: relative;
width: 750px;
height: 500px;
display: inline-block;
}
.dynamic-content {
position: absolute;
top: 0px;
right: 0px;
width: 65%;
padding: 20px;
display: none;
}
.on-load {
position: absolute;
top: 0px;
right: 0px;
padding: 20px;
display: inline-block;
}
.carousel-left {
position: relative;
float: left;
width: 35%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-itens: flex-end;
}
<div class="carousel">
<div class="on-load" id="on-load">Show on Load</div>
<div class="dynamic-content" id="dc-1">Dynamic Content 1</div>
<div class="dynamic-content" id="dc-2">Dynamic Content 2</div>
<div class="dynamic-content" id="element-b">Element B</div>
<div class="dynamic-content" id="dc-3">Dynamic Content 3</div>
<div class="dynamic-content" id="dc-4">Dynamic Content 4</div>
<div class="carousel-left">
<div class="carousel-link" id="link-1">Link 1</div>
<div class="carousel-link" id="link-2">Link 2</div>
<div class="carousel-link" id="element-a">Element A</div>
<div class="carousel-link" id="link-4">Link 4</div>
<div class="carousel-link" id="link-5">Link 5</div>
</div>
</div>
Thanks!
A) you did not set the style rules properly
it should be :
elemA.style.fontWeight = "extra-bold";
elemA.style.borderRight = "6px solid #01aae4";
font-weight is in javaScript fontWheight , same thing for border-right being borderRight.
var elemB = document.getElementById("element-b");
var elemA = document.getElementById("element-a");
if (elemB.style.display = "inline-block") {
elemA.style.color = "#505050";
elemA.style.fontWeight = "extra-bold";
elemA.style.borderRight = "6px solid #01aae4";
} else {
elemA.style.color = "#878787";
}
.carousel {
position: relative;
width: 750px;
height: 500px;
display: inline-block;
}
.dynamic-content {
position: absolute;
top: 0px;
right: 0px;
width: 65%;
padding: 20px;
display: none;
}
.on-load {
position: absolute;
top: 0px;
right: 0px;
padding: 20px;
display: inline-block;
}
.carousel-left {
position: relative;
float: left;
width: 35%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-itens: flex-end;
}
<div class="carousel">
<div class="on-load" id="on-load">Show on Load</div>
<div class="dynamic-content" id="dc-1">Dynamic Content 1</div>
<div class="dynamic-content" id="dc-2">Dynamic Content 2</div>
<div class="dynamic-content" id="element-b">Element B</div>
<div class="dynamic-content" id="dc-3">Dynamic Content 3</div>
<div class="dynamic-content" id="dc-4">Dynamic Content 4</div>
<div class="carousel-left">
<div class="carousel-link" id="link-1">Link 1</div>
<div class="carousel-link" id="link-2">Link 2</div>
<div class="carousel-link" id="element-a">Element A</div>
<div class="carousel-link" id="link-4">Link 4</div>
<div class="carousel-link" id="link-5">Link 5</div>
</div>
</div>
B) I would look for the style via getComputedStyle() and test display:none, so you can use any other display values..
possible example
function test() {
var elemB = document.querySelector("#element-b");
var test = window.getComputedStyle(elemB) ;
var elemA = document.getElementById("element-a");
if(elemB.style.display != "none"){
elemA.style.color = "red";
elemA.style.fontWeight = "extra-bold";
elemA.style.borderRight = "6px solid #01aae4";
}
else{
elemA.style.color = "#878787";
}
}
for (e of document.querySelectorAll('.carousel-left .carousel-link')) {
e.addEventListener("click", function() {
test();
})
}
.carousel {
position: relative;
width: 750px;
height: 500px;
display: inline-block;
}
.dynamic-content {
position: absolute;
top: 0px;
right: 0px;
width: 65%;
padding: 20px;
display: none;
}
.on-load {
position: absolute;
top: 0px;
right: 0px;
padding: 20px;
display: inline-block;
}
.carousel-left {
position: relative;
float: left;
width: 35%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-itens: flex-end;
}
#element-b {
display:inline-block;
}
<div class="carousel">
<div class="on-load" id="on-load">Show on Load</div>
<div class="dynamic-content" id="dc-1">Dynamic Content 1</div>
<div class="dynamic-content" id="dc-2">Dynamic Content 2</div>
<div class="dynamic-content" id="element-b">Element B</div>
<div class="dynamic-content" id="dc-3">Dynamic Content 3</div>
<div class="dynamic-content" id="dc-4">Dynamic Content 4</div>
<div class="carousel-left">
<div class="carousel-link" id="link-1">Link 1</div>
<div class="carousel-link" id="link-2">Link 2</div>
<div class="carousel-link" id="element-a" >Element A (click to perform test)</div>
<div class="carousel-link" id="link-4">Link 4</div>
<div class="carousel-link" id="link-5">Link 5</div>
</div>
</div>
You need something to trigger the check to determine if #element-b is visble or not.
Below, I suggest a click event handler on .carousel, which is a container. Then, you can use the jQuery :visible selector in a if statement.
let elemB = $("#element-b");
let elemA = $("#element-a");
// Force the element b to be showing (just for the demo here)
elemB.show()
$(document).on("click", ".carousel", function() {
setTimeout(() => {
if (elemB.is(":visible")) {
console.log("Element B is visible.")
elemA.css({
"color": "#505050",
"font-weight": "extra-bold",
"border-right": "6px solid #01aae4"
})
} else {
console.log("Element B is not visible.")
elemA.css({
"color": "#878787"
})
}
}, 350); // Ajust this timeout.
});
.carousel {
position: relative;
width: 750px;
height: 500px;
display: inline-block;
}
.dynamic-content {
position: absolute;
top: 0px;
right: 0px;
width: 65%;
padding: 20px;
display: none;
}
.on-load {
position: absolute;
top: 0px;
right: 0px;
padding: 20px;
display: inline-block;
}
.carousel-left {
position: relative;
float: left;
width: 35%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-itens: flex-end;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">
<div class="on-load" id="on-load">Show on Load</div>
<div class="dynamic-content" id="dc-1">Dynamic Content 1</div>
<div class="dynamic-content" id="dc-2">Dynamic Content 2</div>
<div class="dynamic-content" id="element-b">Element B</div>
<div class="dynamic-content" id="dc-3">Dynamic Content 3</div>
<div class="dynamic-content" id="dc-4">Dynamic Content 4</div>
<div class="carousel-left">
<div class="carousel-link" id="link-1">Link 1</div>
<div class="carousel-link" id="link-2">Link 2</div>
<div class="carousel-link" id="element-a">Element A</div>
<div class="carousel-link" id="link-4">Link 4</div>
<div class="carousel-link" id="link-5">Link 5</div>
</div>
</div>
Now... I assume you handle the clicks or whatever event to show / hide the elements on the right side.
I have a problem with multiple Flickity obj on the page. I can easly generate Flickity with slides, but there is a problem with the next ones.
Here's is the code:
I'm trying to put flickity in a bootstrap tabpanel (4 panel, each has his own Flickity).
var featuredFlkty = new Flickity('.carousel-featured', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: true
});
var topSellerFlkty = new Flickity('.carousel-top-rated', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: true
});
.carousel-section {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 85px;
background-color: $carousel-bg-color;
border-top: $gallery-border;
padding: 7.5px 0;
.main-carousel {
max-width: 100%;
height: 100%;
padding: 0 40px;
.carousel-cell {
width: 66px;
height: 100%;
#extend %center-flex-display;
background-color: $product-slider-bg-color;
display: inline-flex;
margin: 0 5px;
padding: 5px;
cursor: pointer;
img {
max-width: 100%;
height: auto;
}
&.is-selected {
opacity: 1;
}
&:not(.is-selected) {
opacity: 0.3;
}
}
}
.flickity-button {
background: $text-color;
padding: 0;
}
.flickity-button:hover {
#extend %bg-hover-animation;
}
.flickity-prev-next-button {
width: 30px;
height: 100%;
border-radius: 0;
}
/* icon color */
.flickity-button-icon {
fill: white;
}
/* position outside */
.flickity-prev-next-button.previous {
left: 5px;
}
.flickity-prev-next-button.next {
right: 5px;
}
}
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="top-rated">
<div class="tabpanel-content">
<section class="carousel-section">
<div class="main-carousel carousel-top-rated">
<div class="carousel-cell is-selected" id="carousel-top-rated-cell-1">
<img src="images/rocker-recliner.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-top-rated-cell-2">
<img src="images/black-chair.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-top-rated-cell-3">
<img src="images/Bed.png" alt="..." />
</div>
</div>
</section>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="featured">
<div class="tabpanel-content">
<section class="carousel-section">
<div class="main-carousel carousel-featured">
<div class="carousel-cell" id="carousel-featured-1">
<img src="images/rocker-recliner.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-featured-2">
<img src="images/black-chair.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-featured-3">
<img src="images/Bed.png" alt="..." />
</div>
</div>
</section>
</div>
</div>
</div>
The styling is just great. Everything works on the 1st Flickity, but on the 2nd, there are no cells, just arrows and height=0 of the viewport.
Ok, I have found the solution :)
Flickity - resize option
Fort the ones still looking for a detailed solution to this problem, here's the code I'm using which works fine on multiple galleries in the same page:
const galleries = document.querySelectorAll('.block-gallery');
galleries.forEach(gallery=> {
new Flickity(gallery, {
contain: true,
setGallerySize: true,
wrapAround: true,
imagesLoaded: true
});
});
Here is my code, if im on the end of the slider then the right button should disable automatically, and the same thing should happen when im on the initial stage means, if im on "area1" then the left arrow wont work and if I'm on the "area 8" then right arrow shouldn't work
$('.rightArrow').click(function(event) {
$('.box').animate({'left' : "-=200px"});
});
$('.leftArrow').click(function() {
$('.box').animate({'left' : "+=200px"});
});
.mainRow::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
height: 0px;
}
.mainRow::-webkit-scrollbar-thumb {
width: 0px;
height: 0px;
}
.wrapper {
position: relative;
}
.mainRow {
overflow-x: scroll !important;
border-collapse:separate;
border-spacing:5px 0px;
}
.box {
background: red;
height: 100px;
min-width: 200px;
max-width: 200px;
display: table-cell;
animation: slideBox .5s;
animation-fill-mode: forwards;
position: relative;
}
.arrows {
position: absolute;
width: 100%;
top: 0;
}
.leftArrow {
position: absolute;
left: -50px;
top: 20px;
font-size: 40px;
}
.rightArrow {
position: absolute;
right: -50px;
top: 20px;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">
<div class="mainRow">
<div class="box">area 1</div>
<div class="box">area 2</div>
<div class="box">area 3</div>
<div class="box">area 4</div>
<div class="box">area 5</div>
<div class="box">area 6</div>
<div class="box">area 7</div>
<div class="box">area 8</div>
</div>
<div class="arrows">
<button type="button" class="leftArrow" id="noclick"> <i class="fa fa-angle-left"></i> </button>
<button type="button" class="rightArrow"> <i class="fa fa-angle-right"></i> </button>
</div>
</div>
fixed
probably not best solution if you're planning on changing the number of slides you're using (but in that case you'll have to calculate the maximum left possible to check if you want to go further or not).
add a check for position().left before you change the position:
var truePosition = $('.box').position().left;
$('.rightArrow').click(function(event) {
if(truePosition > -1415){
truePosition -= 205;
$('.box').animate({'left' : "-=205px"});
}
});
$('.leftArrow').click(function() {
if(truePosition < 20){
truePosition += 205;
$('.box').animate({'left' : "+=205px"});
}
});
check a working example on jsfiddle
Here you go with one more solution https://jsfiddle.net/znkne887/2/
var boxWidth = $('.box:first-child').width() + 5;
var cnt = 0;
$('.rightArrow').click(function(event) {
$('.box').animate({'left' : `-=${boxWidth}px`});
cnt++;
if(cnt === $('.mainRow').children().length - 1 ){
$(this).hide();
}else{
$(this).show();
}
$('.leftArrow').show();
});
$('.leftArrow').click(function() {
$('.box').animate({'left' : `+=${boxWidth}px`});
cnt--;
if(cnt === 0){
$(this).hide();
}else{
$(this).show();
}
$('.rightArrow').show();
});
.mainRow::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
height: 0px;
}
.mainRow::-webkit-scrollbar-thumb {
width: 0px;
height: 0px;
}
.wrapper {
position: relative;
width: 200px;
margin: 0 auto;
}
.mainRow {
width: 200px;
overflow-x: scroll !important;
border-collapse:separate;
border-spacing:5px 0px;
}
.box {
background: red;
height: 100px;
min-width: 200px;
max-width: 200px;
display: table-cell;
animation: slideBox .5s;
animation-fill-mode: forwards;
position: relative;
text-align:center;
color: #fff;
font-weight: 700;
}
.arrows {
position: absolute;
width: 100%;
top: 0;
z-index:9;
}
.leftArrow {
position: absolute;
left: -35px;
top: 20px;
font-size: 40px;
display:none;
}
.rightArrow {
position: absolute;
right: -35px;
top: 20px;
font-size: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">
<div class="arrows">
<button type="button" class="leftArrow" id="noclick"> <i class="fa fa-angle-left"></i> </button>
</div>
<div class="mainRow">
<div class="box">area 1</div>
<div class="box">area 2</div>
<div class="box">area 3</div>
<div class="box">area 4</div>
<div class="box">area 5</div>
<div class="box">area 6</div>
<div class="box">area 7</div>
<div class="box">area 8</div>
</div>
<div class="arrows">
<button type="button" class="rightArrow"> <i class="fa fa-angle-right"></i> </button>
</div>
</div>
Here is a working fiddle for any amount of slides. Click the right arrow until the end and see what happens.
NOTE: The button only hides when the last slide is fully visible, so you may have to modify your slider to always move a whole slide.
EDIT: Should work for the left button now.
$('.rightArrow').click(function(event) {
$('.box').animate({'left' : "-=200px"});
if( $('.box').last().isFullyVisible() ){
$(this).hide();
}
$('.leftArrow').show();
});
$('.leftArrow').click(function() {
$('.box').animate({'left' : "+=200px"});
if( $('.box').first().isFullyVisible() ){
$(this).hide();
}
$('.rightArrow').show();
});
$(function(){
if( $('.box').first().isFullyVisible() ){
$('.leftArrow').hide();
}
});
jQuery.fn.isFullyVisible = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var elemtHeight = this.height();
elemtHeight = Math.round(elemtHeight);
var bounds = this.offset();
bounds.top = bounds.top + elemtHeight;
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
}
body{
margin:0;
padding:0;
}
.mainRow::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
height: 0px;
}
.mainRow::-webkit-scrollbar-thumb {
width: 0px;
height: 0px;
}
.wrapper {
position: relative;
}
.mainRow {
overflow-x: scroll !important;
border-collapse:separate;
border-spacing:5px 0px;
}
.box {
background: #ddd;
height: 100px;
min-width: 200px;
max-width: 200px;
display: table-cell;
animation: slideBox .5s;
animation-fill-mode: forwards;
position: relative;
}
.arrows {
position: absolute;
width: 100%;
top: 0;
}
.leftArrow {
position: absolute;
left: 0px;
top: 20px;
font-size: 40px;
}
.rightArrow {
position: absolute;
right: 0px;
top: 20px;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">
<div class="mainRow">
<div class="box">area 1</div>
<div class="box">area 2</div>
<div class="box">area 3</div>
<div class="box">area 4</div>
<div class="box">area 5</div>
<div class="box">area 6</div>
<div class="box">area 7</div>
<div class="box">area 8</div>
</div>
<div class="arrows">
<button type="button" class="leftArrow" id="noclick"> <i class="fa fa-angle-left"></i> </button>
<button type="button" class="rightArrow"> <i class="fa fa-angle-right"></i> </button>
</div>
</div>