Full-width slider.

Developer
António Capelo
Size
3,886 Kb
Views
8,096
  1. Full-width slider. Previews
  2. Full-width slider. HTML Codes
  3. Full-width slider. CSS Codes
  4. Full-width slider. JS Codes

How do I make an full-width slider.?

Simple full-width slider tutorial.. What is a full-width slider.? How do you make a full-width slider.? This script and codes were developed by António Capelo on 15 December 2022, Thursday.

Full-width slider. Previews
IQ Test

Full-width slider. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full-width slider.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="inner"> <div class="slider"> <a href="#" class="next">+</a> <a href="#" class="prev">-</a> <ul> <li>SLIDE 1</li> <li class="alt">SLIDE 2</li> <li>SLIDE 3</li> <li class="alt">SLIDE 4</li> <li>SLIDE 5</li> <li class="alt">SLIDE 6</li> <li>SLIDE 7</li> <li class="alt">SLIDE 8</li> </ul> </div> </div>
</div>
<div class="desc">	<h1>Simple full-width slider.</h1> <p>Basically we have to set up an inner div, with 100% width. Our li's will be floated left, with 0 padding and margins, with 100% width, which will make our slider really full width (this width will be updated by javascript afterwards). </p> <p>Then, by JS: count the number of li's, and their width; set the width of the slider container to a single slide width, and set the ul width to the total width (no of slides * width of each one).</p> <p>For the animation, we need to have one 'reserve' slide. For that, we put the last slide on the begining of the ul and move the ul one 'slide' to the right. This enables us to have the last slide available when scrolling left on the first one.</p> <p>So, for example, to scroll left, we need to: <ul> <li>increase the <b>left</b> property of the ul (to see the slide to the lef)</li> <li>add a new 'reserve' slide, taking the last slide and preppending it to the ul </li> <li>when the DOM is updated, reset the ul style, setting the <b>left</b> property to 0</li> </ul></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Full-width slider. - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Oswald);
body { background: url(https://subtlepatterns.com/patterns/stardust.png);
}
* { color: ghostwhite; font-family: 'Oswald', sans-serif; box-sizing: border-box;
}
html, body { margin: 0; padding: 0; font-family: 'Open Sans';
}
h1 { color: #fff; text-align: center; font-weight: 300;
}
.slider { position: relative; overflow: hidden; margin: 0;
}
.slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none;
}
.slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; height: 300px; background: #ccc; text-align: center; line-height: 300px; width: 100%; font-size: 25px; background: #75B08A;
}
.slider ul li.alt { background: #00546B;
}
.container { width: 100%; padding: 0 !important; margin-top: 20px;
}
.inner { width: 100%; height: 50%;
}
.prev, .next { position: absolute; top: 35%; z-index: 999; display: block; padding: 0 20px 0 20px; width: auto; height: 85px; background: url(https://subtlepatterns.com/patterns/stardust.png); text-decoration: none; font-weight: 600; font-size: 50px; cursor: pointer;
}
.prev:hover, .next:hover { opacity: 1; color: black; background: transparent; text-decoration: none;
}
.next { right: 0;
}
.desc { margin: 20px; letter-spacing: 2px; font-size: 24px;
}
.desc h1 { color: #FF5460;
}

Full-width slider. - Script Codes JS Codes

jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('.slider ul li').length; var slideWidth = $('.slider ul li').width(); var slideHeight = $('.slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; var newWidth = 100/slideCount; $('.slider').css({ width: slideWidth, height: slideHeight }); $('.slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('.slider ul li').css({ width: newWidth+'%'}); // because of the slider is full width $('.slider ul li:last-child').prependTo('.slider ul'); // reserve a 'slot' for moving left function move(direction) { switch(direction) { case 'left': $('.slider ul').animate({ left: + slideWidth }, 200, function () { $('.slider ul li:last-child').prependTo('.slider ul'); $('.slider ul').css('left', ''); }); break; case 'right': $('.slider ul').animate({ left: - slideWidth }, 200, function () { $('.slider ul li:first-child').appendTo('.slider ul'); $('.slider ul').css('left', ''); }); break; default: break; } }; $('a.prev').click(function () { move('left'); }); $('a.next').click(function () { move('right'); });
});
Full-width slider. - Script Codes
Full-width slider. - Script Codes
Home Page Home
Developer António Capelo
Username capelo
Uploaded December 15, 2022
Rating 3.5
Size 3,886 Kb
Views 8,096
Do you need developer help for Full-width slider.?

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!

António Capelo (capelo) Script Codes
Name
Custom checkbox example
Room
Gif as page background
Brainerd scroller
ToDo
Background cover
AngularJS Modal Factory
React Boilerplate
Donut Chart example - MorrisJS
Camera click
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!