3 easy ways to create a slider is easy

Thursday, 19/12/2019

Tram Ho

1. Introduction

Hello everyone, nice to meet you once a month. As usual, for every post I will share about what I have learned, it might help some people you don’t know. I’m happy to be shared with everyone.

If you often visit websites that are often online sales websites, businesses … then you often see the top of the website often has a constantly changing picture, video, gif show, this is called sliders. The use of slider has a great effect of attracting the attention of customers. Webmasters often put important content in a slider at the top of the website to help users quickly see the highlights of the website.

Sliders usually change over a certain period of time (usually 4 to 5s). Users can also operate directly on the website by clicking or swiping to view the next slide or prev about the previous slide.

For a programmer, it is probably not new to this function. Today, I will show you some ways to create a slide quickly and simply

2. Ways to create a slider

2.1 Use bootstrap

Method 1: Here I want to introduce to you the slider that bootstrap supports us.

If you want to use boostrap’s built-in slider, you need to go to https://getbootstrap.com to download boostrap or you can use the link directly on the bootstrap page to get js, css paste into the website that we have. can use slider without having to code css or js.

  &lt;div class="bd-example"&gt;
    &lt;div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#carouselExampleCaptions" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#carouselExampleCaptions" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="carousel-item active"&gt;
          &lt;img src="image1.jpg" class="d-block w-100" alt="..."&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;img src="image2.jpg" class="d-block w-100" alt="..."&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;img src="image3.jpg" class="d-block w-100" alt="..."&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"&gt;
        &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"&gt;
        &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;

</ol>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

Here I briefly explained the parts to show a slider:

.carousel-inner this is the wrapper around the div containing the image item, caption each image that we want to display.
.carousel-indicators here is the section containing the navigation links we want to click on the slide show the image we want to visit. Usually here is the dot icon or slide index icon.
.carousel-control-prev. carousel-control-next is the part containing the prev or next link back and forth from the slides.

Also you want to add caption for each image, we add a content div after each img tag.

 &lt;div class="carousel-caption d-none d-md-block"&gt;
    &lt;h5&gt;Tiêu đề caption&lt;/h5&gt;
    &lt;p&gt;Nội dung caption&lt;/p&gt;
 &lt;/div&gt;

<h5>Tiêu đề caption</h5>

<p>Nội dung caption</p>

</div>

Very simple is not it, continue to the second way I will guide you to use css, pure js to code out a slider, in this way requires you have basic knowledge of html, css, js okay . It is not difficult to stay tuned!

2.2 Use pure html, css, js

In the second way we code the slider automatically, you create yourself 3 files index.html , style.css , javascript.js :

The style.css file you use css to align the slider size as well as the position of the images, next, prev button:

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif; margin:0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

100

* {

box-sizing: border-box

}

body {

font-family: Verdana, sans-serif; margin:0

}

.mySlides {

display: none

}

img {

vertical-align: middle;

}

.slideshow-container {

max-width: 1000px;

position: relative;

margin: auto;

}

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

padding: 16px;

margin-top: -22px;

color: white;

font-weight: bold;

font-size: 18px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

user-select: none;

}

.next {

right: 0;

border-radius: 3px 0 0 3px;

}

.prev:hover, .next:hover {

background-color: rgba(0,0,0,0.8);

}

.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

}

.numbertext {

color: #f2f2f2;

font-size: 12px;

padding: 8px 12px;

position: absolute;

top: 0;

}

.dot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

}

.active, .dot:hover {

background-color: #717171;

}

.fade {

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s;

animation-name: fade;

animation-duration: 1.5s;

}

@-webkit-keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

@keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

@media only screen and (max-width: 300px) {

.prev, .next,.text {font-size: 11px}

}

The file index.html contains static html code, here you lead the image link to the image …

&lt;div class="slideshow-container"&gt;
  &lt;div class="mySlider fade"&gt;
    &lt;img src="image1.jpg" style="width:100%" /&gt;
    &lt;div class="text"&gt;Caption Text&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="mySlider fade"&gt;
    &lt;img src="image2.jpg" style="width:100%" /&gt;
    &lt;div class="text"&gt;Caption Two&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="mySlider fade"&gt;
    &lt;img src="image3.jpg" style="width:100%" /&gt;
    &lt;div class="text"&gt;Caption Three&lt;/div&gt;
  &lt;/div&gt;
  &lt;a class="prev" onclick="plusSlider(-1)"&gt;&amp;#10094;&lt;/a&gt;
  &lt;a class="next" onclick="plusSlider(1)"&gt;&amp;#10095;&lt;/a&gt;
&lt;/div&gt;
&lt;div style="text-align:center"&gt;
  &lt;span class="dot" onclick="currentSlider(1)"&gt;&lt;/span&gt;
  &lt;span class="dot" onclick="currentSlider(2)"&gt;&lt;/span&gt;
  &lt;span class="dot" onclick="currentSlider(3)"&gt;&lt;/span&gt;
&lt;/div&gt;

<div class="text">Caption Text</div>

</div>

<div class="text">Caption Two</div>

</div>

<div class="text">Caption Three</div>

</div>

</div>

</div>

The javascript.js file where we create the next image event, prev image:

var slideIndex = 1;
showSlider(slideIndex);

function plusSlider(n) {
  showSlider(slideIndex += n);
}

function currentSlider(n) {
  showSlider(slideIndex = n);
}

function showSlider(n) {
  var i;
  var slider = document.getElementsByClassName("mySlider");
  var dots = document.getElementsByClassName("dot");
  if (n &gt; slider.length) {slideIndex = 1}
  if (n &lt; 1) {slideIndex = slider.length}
  for (i = 0; i &lt; slider.length; i++) {
      slider[i].style.display = "none";
  }
  for (i = 0; i &lt; dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slider[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

var slideIndex = 1;

showSlider(slideIndex);

function plusSlider(n) {

showSlider(slideIndex += n);

}

function currentSlider(n) {

showSlider(slideIndex = n);

}

function showSlider(n) {

var i;

var slider = document.getElementsByClassName("mySlider");

var dots = document.getElementsByClassName("dot");

if (n > slider.length) {slideIndex = 1}

if (n < 1) {slideIndex = slider.length}

for (i = 0; i < slider.length; i++) {

slider[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slider[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

}

Ok very verbose, right. This way, you can easily create sliders, effects as you like

2.3 Use gem

Why am I saying using gem here? Here I also introduce to you that I am a Ruby backend (Ruby on Rails). I recommend that we should try this language, it is easy to learn and use. When we want to do a function, Ruby’s framework Ruby on Rails has a lot of support gems when we want to program.

For example, some support gems include: Pagination (“kaminari” gem), login (gem “devise”, “omniauth”, “omniauth-google-oauth2”), decentralization (gem “cancancan”) … And there are countless other gems, today’s article I want to share about a gem that supports creating slides is the gem “lex-slider-rails”.

Want to use this gem, then ruby your project rails add gem below and run the bundle install command to install the gem.

gem 'bootstrap-sass', '~&gt; 3.4.1'
gem 'jquery-rails'
gem 'flex-slider-rails'

gem 'bootstrap-sass', '~> 3.4.1'

gem 'jquery-rails'

gem 'flex-slider-rails'

For the gem 'flex-slider-rails' work, we also need to run the gem 'bootstrap-sass' and gem 'jquery-rails' to add bootstrap and jquery to the project.

In the application.css directory, add yourself the line *= require flexslider

In the application.js directory you add yourself the line //= require jquery.flexslider and a piece of js code as below.

$(document).on("turbolinks:load", function() {
  $('.flexslider').flexslider();
});

$(document).on("turbolinks:load", function() {

$('.flexslider').flexslider();

});

Ok here basically has completed the installation step and then you want to use the slider where, just add the html code as below as we have 1 slider to use.

&lt;div class="flexslider"&gt;
  &lt;ul class="slides"&gt;
    &lt;li&gt;
      &lt;img src="image1.jpg" /&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;img src="image2.jpg" /&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;img src="image3.jpg" /&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

The result of all three ways is that we create an active slider. Very simple is not it and below is my achievement.

3. Conclusion

Ok, got it Here I would like to end my share. See you next time next month. If you like the article, vote give me

Reference links:

Share the news now

Source : Viblo

3 easy ways to create a slider is easy

1. Introduction

2. Ways to create a slider

2.1 Use bootstrap

2.2 Use pure html, css, js

2.3 Use gem

3. Conclusion

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers