<div class="slider-wrapper">
<div class="slider-overlay">
<div class="slides-wrapper">
<div class="slides active">
<div class="img-wrapper" style="background-image: url('https://images.unsplash.com/photo-1474436799594-1974f1add7ad?dpr=1&auto=compress,format&fit=crop&w=1924&h=&q=80&cs=tinysrgb&crop=')">
<div class="image-caption"><p>Image caption here...</p></div>
</div>
<div class="card-content">
<div class="liked-wrapper">
<div class="liked-users">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="">
<img src="https://randomuser.me/api/portraits/women/8.jpg" alt="">
</div>
<div class="liked-tagline">
<p>and 256 more</p>
</div>
<button class="like-btn">
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490.4 490.4" style="enable-background:new 0 0 490.4 490.4;" xml:space="preserve">
<g>
<path d="M222.5,453.7c6.1,6.1,14.3,9.5,22.9,9.5c8.5,0,16.9-3.5,22.9-9.5L448,274c27.3-27.3,42.3-63.6,42.4-102.1
c0-38.6-15-74.9-42.3-102.2S384.6,27.4,346,27.4c-37.9,0-73.6,14.5-100.7,40.9c-27.2-26.5-63-41.1-101-41.1
c-38.5,0-74.7,15-102,42.2C15,96.7,0,133,0,171.6c0,38.5,15.1,74.8,42.4,102.1L222.5,453.7z M59.7,86.8
c22.6-22.6,52.7-35.1,84.7-35.1s62.2,12.5,84.9,35.2l7.4,7.4c2.3,2.3,5.4,3.6,8.7,3.6l0,0c3.2,0,6.4-1.3,8.7-3.6l7.2-7.2
c22.7-22.7,52.8-35.2,84.9-35.2c32,0,62.1,12.5,84.7,35.1c22.7,22.7,35.1,52.8,35.1,84.8s-12.5,62.1-35.2,84.8L251,436.4
c-2.9,2.9-8.2,2.9-11.2,0l-180-180c-22.7-22.7-35.2-52.8-35.2-84.8C24.6,139.6,37.1,109.5,59.7,86.8z"/>
</g>
</svg>
</button>
</div>
<div class="comments-wrapper">
<div class="submit-comment">
<input type="text" placeholder="Write comment...">
<button class="submit-comment">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
<path d="M509.532,34.999c-2.292-2.233-5.678-2.924-8.658-1.764L5.213,225.734c-2.946,1.144-4.967,3.883-5.192,7.034
c-0.225,3.151,1.386,6.149,4.138,7.7l102.719,57.875l35.651,174.259c0.222,1.232,0.723,2.379,1.442,3.364
c0.072,0.099,0.131,0.175,0.191,0.251c1.256,1.571,3.037,2.668,5.113,3c0.265,0.042,0.531,0.072,0.795,0.088
c0.171,0.011,0.341,0.016,0.511,0.016c1.559,0,3.036-0.445,4.295-1.228c0.426-0.264,0.831-0.569,1.207-0.915
c0.117-0.108,0.219-0.205,0.318-0.306l77.323-77.52c3.186-3.195,3.18-8.369-0.015-11.555c-3.198-3.188-8.368-3.18-11.555,0.015
l-60.739,60.894l13.124-112.394l185.495,101.814c1.868,1.02,3.944,1.239,5.846,0.78c0.209-0.051,0.4-0.105,0.589-0.166
c1.878-0.609,3.526-1.877,4.574-3.697c0.053-0.094,0.1-0.179,0.146-0.264c0.212-0.404,0.382-0.8,0.517-1.202L511.521,43.608
C512.6,40.596,511.824,37.23,509.532,34.999z M27.232,234.712L432.364,77.371l-318.521,206.14L27.232,234.712z M162.72,316.936
c-0.764,0.613-1.429,1.374-1.949,2.267c-0.068,0.117-0.132,0.235-0.194,0.354c-0.496,0.959-0.784,1.972-0.879,2.986L148.365,419.6
l-25.107-122.718l275.105-178.042L162.72,316.936z M359.507,419.195l-177.284-97.307L485.928,66.574L359.507,419.195z"/>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="slides">
<div class="img-wrapper" style="background-image: url('https://images.unsplash.com/photo-1415926975120-020cd7670707?dpr=1&auto=compress,format&fit=crop&w=1948&h=&q=80&cs=tinysrgb&crop=')">
<div class="image-caption"><p>Image caption here...</p></div>
</div>
<div class="card-content">
<div class="liked-wrapper">
<div class="liked-users">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="">
<img src="https://randomuser.me/api/portraits/women/8.jpg" alt="">
</div>
<div class="liked-tagline">
<p>and 256 more</p>
</div>
<button class="like-btn">
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490.4 490.4" style="enable-background:new 0 0 490.4 490.4;" xml:space="preserve">
<g>
<path d="M222.5,453.7c6.1,6.1,14.3,9.5,22.9,9.5c8.5,0,16.9-3.5,22.9-9.5L448,274c27.3-27.3,42.3-63.6,42.4-102.1
c0-38.6-15-74.9-42.3-102.2S384.6,27.4,346,27.4c-37.9,0-73.6,14.5-100.7,40.9c-27.2-26.5-63-41.1-101-41.1
c-38.5,0-74.7,15-102,42.2C15,96.7,0,133,0,171.6c0,38.5,15.1,74.8,42.4,102.1L222.5,453.7z M59.7,86.8
c22.6-22.6,52.7-35.1,84.7-35.1s62.2,12.5,84.9,35.2l7.4,7.4c2.3,2.3,5.4,3.6,8.7,3.6l0,0c3.2,0,6.4-1.3,8.7-3.6l7.2-7.2
c22.7-22.7,52.8-35.2,84.9-35.2c32,0,62.1,12.5,84.7,35.1c22.7,22.7,35.1,52.8,35.1,84.8s-12.5,62.1-35.2,84.8L251,436.4
c-2.9,2.9-8.2,2.9-11.2,0l-180-180c-22.7-22.7-35.2-52.8-35.2-84.8C24.6,139.6,37.1,109.5,59.7,86.8z"/>
</g>
</svg>
</button>
</div>
<div class="comments-wrapper">
<div class="submit-comment">
<input type="text" placeholder="Write comment...">
<button class="submit-comment">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
<path d="M509.532,34.999c-2.292-2.233-5.678-2.924-8.658-1.764L5.213,225.734c-2.946,1.144-4.967,3.883-5.192,7.034
c-0.225,3.151,1.386,6.149,4.138,7.7l102.719,57.875l35.651,174.259c0.222,1.232,0.723,2.379,1.442,3.364
c0.072,0.099,0.131,0.175,0.191,0.251c1.256,1.571,3.037,2.668,5.113,3c0.265,0.042,0.531,0.072,0.795,0.088
c0.171,0.011,0.341,0.016,0.511,0.016c1.559,0,3.036-0.445,4.295-1.228c0.426-0.264,0.831-0.569,1.207-0.915
c0.117-0.108,0.219-0.205,0.318-0.306l77.323-77.52c3.186-3.195,3.18-8.369-0.015-11.555c-3.198-3.188-8.368-3.18-11.555,0.015
l-60.739,60.894l13.124-112.394l185.495,101.814c1.868,1.02,3.944,1.239,5.846,0.78c0.209-0.051,0.4-0.105,0.589-0.166
c1.878-0.609,3.526-1.877,4.574-3.697c0.053-0.094,0.1-0.179,0.146-0.264c0.212-0.404,0.382-0.8,0.517-1.202L511.521,43.608
C512.6,40.596,511.824,37.23,509.532,34.999z M27.232,234.712L432.364,77.371l-318.521,206.14L27.232,234.712z M162.72,316.936
c-0.764,0.613-1.429,1.374-1.949,2.267c-0.068,0.117-0.132,0.235-0.194,0.354c-0.496,0.959-0.784,1.972-0.879,2.986L148.365,419.6
l-25.107-122.718l275.105-178.042L162.72,316.936z M359.507,419.195l-177.284-97.307L485.928,66.574L359.507,419.195z"/>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="slides">
<div class="img-wrapper" style="background-image: url('https://images.unsplash.com/photo-1435783099294-283725c37230?dpr=1&auto=compress,format&fit=crop&w=1700&h=&q=80&cs=tinysrgb&crop=')">
<div class="image-caption"><p>Image caption here...</p></div>
</div>
<div class="card-content">
<div class="liked-wrapper">
<div class="liked-users">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="">
<img src="https://randomuser.me/api/portraits/women/8.jpg" alt="">
</div>
<div class="liked-tagline">
<p>and 256 more</p>
</div>
<button class="like-btn">
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490.4 490.4" style="enable-background:new 0 0 490.4 490.4;" xml:space="preserve">
<g>
<path d="M222.5,453.7c6.1,6.1,14.3,9.5,22.9,9.5c8.5,0,16.9-3.5,22.9-9.5L448,274c27.3-27.3,42.3-63.6,42.4-102.1
c0-38.6-15-74.9-42.3-102.2S384.6,27.4,346,27.4c-37.9,0-73.6,14.5-100.7,40.9c-27.2-26.5-63-41.1-101-41.1
c-38.5,0-74.7,15-102,42.2C15,96.7,0,133,0,171.6c0,38.5,15.1,74.8,42.4,102.1L222.5,453.7z M59.7,86.8
c22.6-22.6,52.7-35.1,84.7-35.1s62.2,12.5,84.9,35.2l7.4,7.4c2.3,2.3,5.4,3.6,8.7,3.6l0,0c3.2,0,6.4-1.3,8.7-3.6l7.2-7.2
c22.7-22.7,52.8-35.2,84.9-35.2c32,0,62.1,12.5,84.7,35.1c22.7,22.7,35.1,52.8,35.1,84.8s-12.5,62.1-35.2,84.8L251,436.4
c-2.9,2.9-8.2,2.9-11.2,0l-180-180c-22.7-22.7-35.2-52.8-35.2-84.8C24.6,139.6,37.1,109.5,59.7,86.8z"/>
</g>
</svg>
</button>
</div>
<div class="comments-wrapper">
<div class="submit-comment">
<input type="text" placeholder="Write comment...">
<button class="submit-comment">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
<path d="M509.532,34.999c-2.292-2.233-5.678-2.924-8.658-1.764L5.213,225.734c-2.946,1.144-4.967,3.883-5.192,7.034
c-0.225,3.151,1.386,6.149,4.138,7.7l102.719,57.875l35.651,174.259c0.222,1.232,0.723,2.379,1.442,3.364
c0.072,0.099,0.131,0.175,0.191,0.251c1.256,1.571,3.037,2.668,5.113,3c0.265,0.042,0.531,0.072,0.795,0.088
c0.171,0.011,0.341,0.016,0.511,0.016c1.559,0,3.036-0.445,4.295-1.228c0.426-0.264,0.831-0.569,1.207-0.915
c0.117-0.108,0.219-0.205,0.318-0.306l77.323-77.52c3.186-3.195,3.18-8.369-0.015-11.555c-3.198-3.188-8.368-3.18-11.555,0.015
l-60.739,60.894l13.124-112.394l185.495,101.814c1.868,1.02,3.944,1.239,5.846,0.78c0.209-0.051,0.4-0.105,0.589-0.166
c1.878-0.609,3.526-1.877,4.574-3.697c0.053-0.094,0.1-0.179,0.146-0.264c0.212-0.404,0.382-0.8,0.517-1.202L511.521,43.608
C512.6,40.596,511.824,37.23,509.532,34.999z M27.232,234.712L432.364,77.371l-318.521,206.14L27.232,234.712z M162.72,316.936
c-0.764,0.613-1.429,1.374-1.949,2.267c-0.068,0.117-0.132,0.235-0.194,0.354c-0.496,0.959-0.784,1.972-0.879,2.986L148.365,419.6
l-25.107-122.718l275.105-178.042L162.72,316.936z M359.507,419.195l-177.284-97.307L485.928,66.574L359.507,419.195z"/>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="slides">
<div class="img-wrapper" style="background-image: url('https://images.unsplash.com/photo-1502680390469-be75c86b636f?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=')">
<div class="image-caption"><p>Image caption here...</p></div>
</div>
<div class="card-content">
<div class="liked-wrapper">
<div class="liked-users">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="">
<img src="https://randomuser.me/api/portraits/women/8.jpg" alt="">
</div>
<div class="liked-tagline">
<p>and 256 more</p>
</div>
<button class="like-btn">
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490.4 490.4" style="enable-background:new 0 0 490.4 490.4;" xml:space="preserve">
<g>
<path d="M222.5,453.7c6.1,6.1,14.3,9.5,22.9,9.5c8.5,0,16.9-3.5,22.9-9.5L448,274c27.3-27.3,42.3-63.6,42.4-102.1
c0-38.6-15-74.9-42.3-102.2S384.6,27.4,346,27.4c-37.9,0-73.6,14.5-100.7,40.9c-27.2-26.5-63-41.1-101-41.1
c-38.5,0-74.7,15-102,42.2C15,96.7,0,133,0,171.6c0,38.5,15.1,74.8,42.4,102.1L222.5,453.7z M59.7,86.8
c22.6-22.6,52.7-35.1,84.7-35.1s62.2,12.5,84.9,35.2l7.4,7.4c2.3,2.3,5.4,3.6,8.7,3.6l0,0c3.2,0,6.4-1.3,8.7-3.6l7.2-7.2
c22.7-22.7,52.8-35.2,84.9-35.2c32,0,62.1,12.5,84.7,35.1c22.7,22.7,35.1,52.8,35.1,84.8s-12.5,62.1-35.2,84.8L251,436.4
c-2.9,2.9-8.2,2.9-11.2,0l-180-180c-22.7-22.7-35.2-52.8-35.2-84.8C24.6,139.6,37.1,109.5,59.7,86.8z"/>
</g>
</svg>
</button>
</div>
<div class="comments-wrapper">
<div class="submit-comment">
<input type="text" placeholder="Write comment...">
<button class="submit-comment">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
<path d="M509.532,34.999c-2.292-2.233-5.678-2.924-8.658-1.764L5.213,225.734c-2.946,1.144-4.967,3.883-5.192,7.034
c-0.225,3.151,1.386,6.149,4.138,7.7l102.719,57.875l35.651,174.259c0.222,1.232,0.723,2.379,1.442,3.364
c0.072,0.099,0.131,0.175,0.191,0.251c1.256,1.571,3.037,2.668,5.113,3c0.265,0.042,0.531,0.072,0.795,0.088
c0.171,0.011,0.341,0.016,0.511,0.016c1.559,0,3.036-0.445,4.295-1.228c0.426-0.264,0.831-0.569,1.207-0.915
c0.117-0.108,0.219-0.205,0.318-0.306l77.323-77.52c3.186-3.195,3.18-8.369-0.015-11.555c-3.198-3.188-8.368-3.18-11.555,0.015
l-60.739,60.894l13.124-112.394l185.495,101.814c1.868,1.02,3.944,1.239,5.846,0.78c0.209-0.051,0.4-0.105,0.589-0.166
c1.878-0.609,3.526-1.877,4.574-3.697c0.053-0.094,0.1-0.179,0.146-0.264c0.212-0.404,0.382-0.8,0.517-1.202L511.521,43.608
C512.6,40.596,511.824,37.23,509.532,34.999z M27.232,234.712L432.364,77.371l-318.521,206.14L27.232,234.712z M162.72,316.936
c-0.764,0.613-1.429,1.374-1.949,2.267c-0.068,0.117-0.132,0.235-0.194,0.354c-0.496,0.959-0.784,1.972-0.879,2.986L148.365,419.6
l-25.107-122.718l275.105-178.042L162.72,316.936z M359.507,419.195l-177.284-97.307L485.928,66.574L359.507,419.195z"/>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slider-controls">
<div class="btn btn-prev">
< </div>
<div class="btn btn-next">></div>
</div>
</div>$transitionStyle: all .75s cubic-bezier(0.69, 0.26, 0.18, 1.01);
body {
font-family: 'Quicksand', sans-serif;
font-weight: 300;
font-size: 14px;
line-height: 1.6em;
height: 100vh;
background: linear-gradient(45deg, rgba(0,105,93,1) 0%, rgba(0,170,193,1) 100%);
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size: 1.5em;
}
.slider-wrapper {
margin: 0 auto;
height: 500px;
}
.slides {
height: 100%;
min-width: 300px;
max-width: 300px;
background-size: cover;
float: left;
margin: 0 20px;
box-shadow: 0px 4px 20px 0 #222;
border: 3px solid #fffdf6;
box-sizing: border-box;
overflow: hidden;
position: relative;
background: #fffdf6;
}
.slides:last-child {
margin: 0 7.5px;
}
.slider-overlay {
height: 400px;
width: 100%;
overflow: hidden;
padding: 20px 10px;
}
.slides-wrapper {
height: 100%;
transition: $transitionStyle;
}
.slider-controls {
width: 100%;
display: flex;
justify-content: center;
padding: 0px 10px;
.btn {
background: #efefef;
width: 20px;
text-align: center;
margin: 2px;
}
}
.btn {
padding: 15px;
cursor: pointer;
transition: all .3s;
&:hover {
background: #00aac1;
color: white;
}
}
.img-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 250px;
background-size: 200% 200%;
background-position: 0% 50%;
transition: $transitionStyle;
}
.card-content {
margin-top: 250px;
}
.image-caption {
position: absolute;
bottom: 0px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 10px;
color: white;
letter-spacing: .5px;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0, 0, 0, 0.68) 73%, rgba(0,0,0,0.81) 100%);
}
.liked-users img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid #fff;
box-sizing: border-box;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.37);
}
.liked-users {
width: 70px;
position: relative;
height: 40px;
}
.liked-users img {
float: left;
position: absolute;
transition: all .35s;
transition-delay: .5s;
cursor: pointer;
}
.liked-users img:last-child {
z-index: -2;
}
.active .liked-users img:last-child {
transform: translate3d(50px, 0, 0);
}
.liked-users img:nth-child(2) {
z-index: -1;
}
.active .liked-users img:nth-child(2) {
transform: translate3d(25px, 0, 0);
}
.liked-wrapper {
display: flex;
justify-content: space-around;
padding: 10px;
align-items: center;
z-index: 1;
position: relative;
}
.liked-tagline {
font-weight: 400;
}
.comments-wrapper {
padding: 10px;
}
.submit-comment input {
border-radius: 15px;
border: 2px solid #ededed;
padding: 7.5px 10px;
margin: 0 10px 0 0;
box-sizing: border-box;
width: 75%;
}
.submit-comment input::placeholder {
color: rgba(0,0,0,.25);
letter-spacing: .5px;
padding-left: 5px;
}
button.submit-comment svg {
width: 20px;
height: 20px;
min-width: 20px;
max-width: 20px;
height: 20px;
}
button.submit-comment {
background: transparent;
border: 1px solid #aeaeae;
border-radius: 50%;
padding: 0;
height: 35px;
width: 35px;
display: flex;
justify-content: center;
align-items: center;
}
button.submit-comment svg path {
fill: #aeaeae;
}
.submit-comment {
display: flex;
justify-content: center;
align-items: center;
}
.liked-tagline p {
border-bottom: 1px solid #1e1e6a;
color: #1e1e6a;
font-weight: 700;
cursor: pointer;
}
.like-btn {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
.like-btn svg {
width: 25px;
height: 25px;
}
.active .like-btn svg {
animation: heartbeat 1.5s 2;
animation-delay: 1s;
}
.like-btn svg path {
transition: all .3s;
}
.like-btn:hover svg path {
fill: red;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
10% {
transform: scale(1.15)
}
20% {
transform: scale(1);
}
30% {
transform: scale(1.15);
}
}$(function() {
const $slides = $('.slides');
const margin = 44
const $slideWidth = $($slides[0]).width()
const $slideOverallWidth = $slideWidth + margin
const $sliderWrapper = $('.slider-wrapper')
const $slidesWrapper = $('.slides-wrapper');
const $btnNext = $('.btn-next')
const $btnPrev = $('.btn-prev')
const slidesWrapperWidth = () => {
let slidesAmount = $slides.length
let overallWidth = $slideWidth * slidesAmount
$slidesWrapper.css('width', (overallWidth + margin * slidesAmount - 1))
}
const sliderWrapperWidth = () => {
$sliderWrapper.css('width', $slideWidth + margin)
}
const calcMoveAmount = (index, type) => {
let isNext = type === '+'
let pastAmount = index * $slideOverallWidth
let newAmount
let newIndex
if (!isNext && index === 0) {
newAmount = 0
newIndex = 0
} else if (isNext && index === $slides.length - 1) {
newAmount = pastAmount
newIndex = index
} else {
newAmount = isNext ? pastAmount + $slideOverallWidth : pastAmount - $slideOverallWidth
newIndex = isNext ? index + 1 : index - 1;
}
let parallaxAmount = newIndex / $slides.length * 100
$slides.find('.img-wrapper').css({
'background-position': `${parallaxAmount}% 50%`
})
$slides.removeClass('active to-right to-left')
$($slides[newIndex]).addClass(`active`)
return moveSliderBy(newAmount)
}
const moveSliderBy = amount => {
$slidesWrapper.css('transform', `translate3d(-${amount}px, 0, 0)`)
}
sliderWrapperWidth()
slidesWrapperWidth()
$btnNext.click(function() {
let index = $('.slides.active').index()
calcMoveAmount(index, '+')
})
$btnPrev.click(function() {
let index = $('.slides.active').index()
calcMoveAmount(index, '-')
})
});
External CSS
This Pen doesn't use any external CSS resources.