Posted inTechnology / JavaScript / jQuery / Programming

Multiple image slider in html source code

Today, We want to share with you image slider in html source code.In this post we will show you automatic image sliders in html css javascript, hear for automatic image sliders in html css without javascript we will give you demo and example for implement.In this post, we will learn about Bootstrap 4 Multiple Image Slider With Thumbnail Navigation with an example.

slideshow html code for website

html image sliders

Example 1: index.html

  * {box-sizing:border-box}

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

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */

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

/* 
Position the "next button" to the right */
.next {
  
right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add 
a black background color with a little bit see-through */
.prev:hover, .next:hover {
  
background-color: rgba(0,0,0,0.8);
}

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

/* Number text (1/3 
etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 
12px;
  padding: 8px 12px;
  position: absolute;
  
top: 0;
}

/* The dots/bullets/indicators */
.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;
}

/* 
Fading animation */
.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}
} 

I hope you get an idea about automatic slideshow html.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype