Slider with arrows and dots

Developer
Corbin
Size
3,897 Kb
Views
18,216
  1. Slider with arrows and dots Previews
  2. Slider with arrows and dots HTML Codes
  3. Slider with arrows and dots CSS Codes
  4. Slider with arrows and dots JS Codes

How do I make an slider with arrows and dots?

What is a slider with arrows and dots? How do you make a slider with arrows and dots? This script and codes were developed by Corbin on 26 September 2022, Monday.

Slider with arrows and dots Previews
IQ Test

Slider with arrows and dots - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slider with arrows and dots</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html> <head> <link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'> <link href="https://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="header"> <div class="container"> <a href="#" class="logo-icon"> <img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png"> </a> <ul class="menu"> <li><a href="#">Get the App</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Magazines</a></li> <li><a href="#">Web Tools</a></li> <li><a href="#">Support</a></li> <li><a href="#">Careers</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle">More <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Community</a></li> <li><a href="#">Our Blog</a></li> <li><a href="#">Maps Blog</a></li> <li><a href="#">Eng Blog</a></li> <li><a href="#">Advertisers</a></li> <li><a href="#">Publishers</a></li> <li><a href="#">About Us</a></li> </ul> </li> </ul> </div> </div> <div class="slider"> <div class="slide active-slide"> <div class="container"> <div class="row"> <div class="slide-copy col-xs-5"> <h1>Flipboard Is Your Personal Magazine</h1> <p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p> <ul class="get-app"> <li><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></a></li> <li><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></a></li> <li><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></a></li> <li><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></a></li> </ul> </div> <div class="slide-img col-xs-7"> <img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png" width="540px"> </div> </div> </div> </div> <div class="slide slide-feature"> <div class="container"> <div class="row"> <div class="col-xs-12"> <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png"></a> <a href="#">Read Now</a> </div> </div> </div> </div> <div class="slide"> <div class="container"> <div class="row"> <div class="slide-copy col-xs-5"> <h1>Enjoy Flipboard Magazines</h1> <h2>on the Web</h2> <p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared and enjoyed on the Web by anyone, anywhere.</p> </div> <div class="slide-img col-xs-7"> <img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png"> </div> </div> </div> </div> <div class="slide"> <div class="container"> <div class="row"> <div class="slide-copy col-xs-5"> <h1>Badges & Widgets</h1> <p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p> <ul class="get-app"> <li><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></a></li> <li><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></a></li> <li><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></a></li> <li><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></a></li> </ul> </div> <div class="slide-img col-xs-7"> <img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png" width="540px"> </div> </div> </div> </div> </div> <div class="slider-nav"> <a href="#" class="arrow-prev"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a> <ul class="slider-dots"> <li class="dot active-dot">&bull;</li> <li class="dot">&bull;</li> <li class="dot">&bull;</li> <li class="dot">&bull;</li> </ul> <a href="#" class="arrow-next"><img src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="app.js"></script> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Slider with arrows and dots - Script Codes CSS Codes

/* General */
.container { width: 960px;
}
/* Header */
.header { background-color: rgba(255, 255, 255, 0.95); border-bottom: 1px solid #ddd; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 17px; padding: 15px;
}
/* Menu */
.header .menu { float: right; list-style: none; margin-top: 5px;
}
.menu > li { display: inline; padding-left: 20px; padding-right: 20px;
}
.menu a { color: #898989;
}
/* Dropdown */
.dropdown-menu { font-size: 16px; margin-top: 5px; min-width: 105px;
}
.dropdown-menu li a { color: #898989; padding: 6px 20px; font-weight: 300;
}
/* Carousel */
.slider { position: relative; width: 100%; height: 470px; border-bottom: 1px solid #ddd;
}
.slide { background: transparent url('https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat; background-size: cover; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.active-slide { display: block;
}
.slide-copy h1 { color: #363636; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 40px; margin-top: 105px; margin-bottom: 0px;
}
.slide-copy h2 { color: #b7b7b7; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 40px; margin: 5px;
}
.slide-copy p { color: #959595; font-family: Georgia, "Times New Roman", serif; font-size: 1.15em; line-height: 1.75em; margin-bottom: 15px; margin-top: 16px;
}
.slide-img { text-align: right;
}
/* Slide feature */
.slide-feature { text-align: center; background-image: url('https://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png'); height: 470px;
}
.slide-feature img { margin-top: 112px; margin-bottom: 28px;
}
.slide-feature a { display: block; color: #6fc5e0; font-family: "HelveticaNeueMdCn", Helvetica, sans-serif; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 20px;
}
.slider-nav { text-align: center; margin-top: 20px;
}
.arrow-prev { margin-right: 45px; display: inline-block; vertical-align: top; margin-top: 9px;
}
.arrow-next { margin-left: 45px; display: inline-block; vertical-align: top; margin-top: 9px;
}
.slider-dots { list-style: none; display: inline-block; padding-left: 0; margin-bottom: 0;
}
.slider-dots li { color: #bbbcbc; display: inline; font-size: 30px; margin-right: 5px;
}
.slider-dots li.active-dot { color: #363636;
}
/* App links */
.get-app { list-style: none; padding-bottom: 9px; padding-left: 0px; padding-top: 9px;
}
.get-app li { float: left; margin-bottom: 5px; margin-right: 5px;
}
.get-app img { height: 40px;
}

Slider with arrows and dots - Script Codes JS Codes

var main = function() { //toggle dropdown menu $('.dropdown-toggle').click(function(){ $('.dropdown-menu').toggle().animate({ height : '250px' }, 1100) }); $('.arrow-prev').click(function(){ //previous slide variables var currentSlide = $('.active-slide'); prevSlide = currentSlide.prev(); var currentDot = $('.active-dot'); var prevDot = currentDot.prev(); if(prevSlide.length == 0) { prevSlide = $('.slide').last(); prevDot = $('.dot').last(); } //apply variables to change back to prev slide currentSlide.fadeOut(600).removeClass('active-slide'); prevSlide.fadeIn(600).addClass('active-slide'); //make current dot go to prev dot currentDot.removeClass('active-dot'); prevDot.addClass('active-dot'); }); $('.arrow-next').click(function(){ //next slide variables var currentSlide = $('.active-slide'); var nextSlide = currentSlide.next(); //next dot variables var currentDot = $('.active-dot'); var nextDot = $('.active-dot').next(); if(nextSlide.length == 0) { nextSlide = $('.slide').first(); nextDot = $('.dot').first(); } //moving to next slide currentSlide.fadeOut(200).removeClass('active-slide'); nextSlide.fadeIn(1200).addClass('active-slide'); //moving to next dot currentDot.removeClass('active-dot'); nextDot.addClass('active-dot'); });
}
$(document).ready(main);
Slider with arrows and dots - Script Codes
Slider with arrows and dots - Script Codes
Home Page Home
Developer Corbin
Username corbinmj16
Uploaded September 26, 2022
Rating 3
Size 3,897 Kb
Views 18,216
Do you need developer help for Slider with arrows and dots?

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!

Corbin (corbinmj16) Script Codes
Name
Tab area
Drawing App with Canvas
Vue.js To-do List
JS Arrays
A Pen by Corbin
Diabetes Calculator
Red Box Move on Mouse Coordiantes
Posting Statuses
Vue.js Search
Simple Parallax Scroll
Create amazing blog posts 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!