Slider with Navigation slider - slick

Developer
Tiberiu Raducea
Size
3,324 Kb
Views
44,528
  1. Slider with Navigation slider - slick Previews
  2. Slider with Navigation slider - slick HTML Codes
  3. Slider with Navigation slider - slick CSS Codes
  4. Slider with Navigation slider - slick JS Codes

How do I make an slider with navigation slider - slick?

Slider with Navigation mini slider using slick carousel.. What is a slider with navigation slider - slick? How do you make a slider with navigation slider - slick? This script and codes were developed by Tiberiu Raducea on 25 September 2022, Sunday.

Slider with Navigation slider - slick Previews
IQ Test

Slider with Navigation slider - slick - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slider with Navigation slider - slick</title> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="special-container"> <div class="round-we-go"> <div class="banner" style="background-image:url(http://lorempixel.com/1920/1080/technics/);"> </div> <div class="banner" style="background-image:url(http://lorempixel.com/1920/1080/business/);"> </div> <div class="banner" style="background-image:url(http://lorempixel.com/1920/1080/nature/);"> </div> <div class="banner" style="background-image:url(http://lorempixel.com/1920/1080/sports/);"> </div> </div> <div class="sub-round-we-go"> <div class="small-one"> <div class="piece"> <h2>Fancy Title</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec </p> <a href="#" class="button secondary">Follow this link</a> </div> <div class="piece"> <h2>Fancy Title 2</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec </p> <a href="#" class="button secondary">Follow this link</a> </div> <div class="piece"> <h2>Fancy Title 3</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec </p> <a href="#" class="button secondary">Follow this link</a> </div> <div class="piece"> <h2>Fancy Title 4</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec </p> <a href="#" class="button secondary">Follow this link</a> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slider with Navigation slider - slick - Script Codes CSS Codes

body { font-family: 'Roboto', sans-serif;
}
.special-container { cursor: move; position: relative; display: block; margin: 0; padding: 0; width: 100%;
}
.special-container h1, .special-container h2, .special-container h3, .special-container h4, .special-container h5 { color: white;
}
.special-container .banner { height: 750px; width: 100%; background-size: cover; background-position: center center;
}
.special-container .sub-round-we-go { position: absolute; top: 4rem; right: 4rem; width: 40%; max-width: 700px; min-width: 320px; height: 600px; padding: 3rem 2rem; background: rgba(0, 0, 0, 0.5);
}
.special-container .sub-round-we-go .small-one { position: relative;
}
.special-container .sub-round-we-go .slick-dots { text-align: left;
}
.special-container .sub-round-we-go .slick-dots li button { background: transparent; border-radius: 100%; border: 4px solid rgba(255, 255, 255, 0.3); -webkit-transition: 400ms -webkit-transform linear; transition: 400ms -webkit-transform linear; transition: 400ms transform linear; transition: 400ms transform linear, 400ms -webkit-transform linear; -webkit-transform: scale(0.8); transform: scale(0.8);
}
.special-container .sub-round-we-go .slick-dots li button:before { display: none;
}
.special-container .sub-round-we-go .slick-dots li.slick-active button { -webkit-transform: scale(1); transform: scale(1); border: 4px solid white;
}
.special-container .sub-round-we-go .piece { padding: 1rem; color: white; cursor: move;
}
.special-container .sub-round-we-go .piece:focus { outline: initial;
}

Slider with Navigation slider - slick - Script Codes JS Codes

//66ik4k
$(document).foundation();
$(document).ready(function() { $('.round-we-go').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.small-one' }); $('.small-one').slick({ arrows: false, slidesToShow: 1, slidesToScroll: 1, asNavFor: '.round-we-go', dots: true, focusOnSelect: true });
});
Slider with Navigation slider - slick - Script Codes
Slider with Navigation slider - slick - Script Codes
Home Page Home
Developer Tiberiu Raducea
Username tyberiu88
Uploaded September 25, 2022
Rating 3
Size 3,324 Kb
Views 44,528
Do you need developer help for Slider with Navigation slider - slick?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tiberiu Raducea (tyberiu88) Script Codes
Name
Ping CSS
Wedding loader
Radar pulse
Very basic mobile menu with foundation 6
Under Maintenance
Different Sort of Pagination
Cookie policy Sass options
Sass random
Funky Scroll up and down
A Pen by Tiberiu Raducea
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!