Basic Image Carousel With Mouse Interactions – Slider-Metallica

The Slider-Metallica JavaScript plugin lets you create a basic image carousel where you can switch between images with the mouse wheel or by clicking the edge of the images.

How to use it:

Code the HTML for the image slider carousel.

<div class="slider">
  <div class="slider-content">
    <img src="https://source.unsplash.com/600x450/?yoga" alt="">
    <img src="https://source.unsplash.com/600x450/?woman" alt="">
    <img src="https://source.unsplash.com/600x450/?girl" alt="">
    <img src="https://source.unsplash.com/600x450/?body" alt="">
    <div class="radio-buttons"></div>
    <div class="prev-image"></div>
    <div class="next-image"></div>
  </div>
</div>

The primary CSS styles for the slider carousel.

.slider {
  text-align: center;
}
.slider-content {
  display: inline-block;
  position: relative;
}
.slider-content img:selected {
  background-color: transparent;
}
.slider-content img {
  display: none;
  outline: none;
}

Style the slider controls.

.radio-buttons {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}
.radio-buttons input[type=radio] {
  display: none;
}
.radio-buttons input[type=radio] + span {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  background-color: #eee;
  margin: 0 5px;
  cursor: pointer;
}
.radio-buttons input[type=radio]:checked + span {
  background-color: olivedrab;
}
.prev-image, .next-image {
  position: absolute;
  width: 50px;
  height: 100%;
  background-color: rgba(51, 51, 51, 0);
  top: 0;
}
.prev-image:hover, .next-image:hover {
  background-color: rgba(51, 51, 51, 0.4);
}
.prev-image {
  left: 0;
}
.next-image {
  right: 0;
}

Load the JavaScript file slider.js at the end of the document. Done.

<script src="slider..js"></script>