Skip to main content

Archive

Show more

Two Image Slider | HTML, CSS And JsPlugin

by Rustcode
Two-Element-Slider-HTML-CSS-And-JsPlugin

Two Image Slider Using HTML, CSS And JsPlugin

You may have seen many sliders on websites that change the content automatically, or the content of the slider changes at the click of a button. These types of sliders use JavaScript, jQuery and other powerful languages. You can see the Image Slider article on this website. Some of them are given below:

In this article we will discuss a different kind of slider. This slider does not change the content automatically nor on click but it has a slider point that moves from one place to another. The amount of area the slider covers depends on the width of the slider's container.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Two Image Slider | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

You can download all the images from github repo.

<!DOCTYPE html>
<html>
<head>
  <title>Two Element Slider | Rustcode</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<two-up>
  <div class="first-wrapper">
    <img src="01.jpg">
  </div>
  <div class="second-wrapper">
  <img src="02.jpg">
  </div>
</two-up>

</body>
</html>

We are using "two ul element" plugin that will help us to create this animation in easy way and fast. You can download it from github or NPM.

<script src="https://unpkg.com/two-up-element@1"></script>



03. CSS

body{
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #6E72FC;
  background-image: linear-gradient(315deg, #6E72FC 0%, #AD1DEB 74%);
}

img{
  width: 700px;
  height: 460px;
  border-radius: 4px;
}

two-up{
  max-width: 700px;
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment