Hello Friends, Today in this post, we’ll learn How To Create a Responsive 3D Touch Slider Carousel Design | Html, CSS. Recently I have shared a post, Neumorphism UI Design GoPro Camera | HTML & CSS. but our today’s topic is Responsive 3D Touch Slider Carousel Design using Html & CSS.

Basically, Owl carousel is a touch-enabled jQuery plugin that lets you create a beautiful, responsive carousel slider. There are many dedicated libraries for creating sliders but some are popular like slick.js, owl-carousel, etc.

Today we will learn to create a Responsive 3D Touch Slider Carousel Design with a jQuery plugin. Basically, there are 5 review sections with dummy content like name, image, etc. Each section contains an image, review text, and name with a shape like a name is placed on a rounded rectangle and the image is placed in a circle shape.

This is a simple jQuery Responsive 3D Touch Slider without borders but a clean unique color to indicate where texts can be entered. The thumbnail is created in rounded, you see the quotes just inside the bootstrap testimonial slider. It even has also a user title. Its sheer simplicity and beauty.

So, Today I am sharing Responsive 3D Touch Slider With Owl Carousel. There I have used CSS for creating a responsive layout and an owl carousel for creating the slider. The owl carousel is a jQuery plugin and jQuery is a JavaScript library, that’s why we can call this JS based program. You can use this program to creating a content slider on your website.

If you are thinking now how this review carousel actually is, then see the preview given below. Before sharing source code, let’s talk a little bit about it. First I have created the layout which is based on a base, created the main section, and placed row and column grid inside it.

Play Video

Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave style to elements like a shadow, color, position, etc. Inside the HTML tags, I have placed bootstrap‘s pre-built class name for the size on multiple screens. In the CSS file, I have heavily used the transform command and gave max-width to some elements like image.

As you know this program is based on the owl carousel (info)so, the JS file has fewer lines of codes. In the JS file, I have created a function on document ready using (document).ready command. And placed values in pre-built commands which are created in the plugin like speed, autoplay, etc. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. Firs for the HTML, the second one is for CSS, and the third one is for javascript. Follow the steps to creating this without any error. A well designed, touch-enabled, and fully responsive testimonials slider based on jQuery Owl carousel. It equally works on almost all modern browsers.

The users can slide next to previous reviews with swipe (mouse drag) and dots navigation. Everything is predefined, you just need to edit its HTML structure to customize. Moreover, this testimonials slider template fully depended on the Owl slider. So, it can be highly customized with Owl configuration options.

Responsive 3D Touch Slider Carousel Design with shadow. While reading the touch slider, you can resize the slider by clicking and dragging the window where you see the marker. The box itself has a shadow around it to distinctively show you where you can enter text.

These colorful touch slider templates come with colored borders to give it a cool look and design. It is also resizable using a click and drag action which makes it bigger vertically. You can change the colors to suit what you really want to archive.

owl carousels are an important component of every website. Owl carousel is one of them so we worked with it so you can easily integrate it into your page. Now you can set some of the most important features via data attributes.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Responsive 3D touch Slider Using Html & CSS | CSS3 Carousel Design | Build 3D Slider</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <input type="radio" name="slider" id="item-1" checked>
    <input type="radio" name="slider" id="item-2">
    <input type="radio" name="slider" id="item-3">
  <div class="cards">
    <label class="card" for="item-1" id="song-1">
      <img decoding="async" src="images/bg-1.jpg" alt="song">
    </label>
    <label class="card" for="item-2" id="song-2">
      <img decoding="async" src="images/bg-2.jpg" alt="song">
    </label>
    <label class="card" for="item-3" id="song-3">
      <img decoding="async" src="images/bg-3.jpg" alt="song">
    </label>
  </div>
  <div class="player">
    <div class="upper-part">
      <div class="play-icon">
        <svg width="20" height="20" fill="#790c5a" stroke="#790c5a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-play" viewBox="0 0 24 24">
          <defs/>
          <path d="M5 3l14 9-14 9V3z"/>
        </svg>
      </div>
      <div class="info-area" id="test">
        <label class="song-info" id="song-info-1">
          <div class="title">Bunker</div>
          <div class="sub-line">
            <div class="subtitle">Balthazar</div>
            <div class="time">4.05</div>
          </div>
        </label>
        <label class="song-info" id="song-info-2">
          <div class="title">Words Remain</div>
          <div class="sub-line">
            <div class="subtitle">Moderator</div>
            <div class="time">3.05</div>
          </div>
        </label>
        <label class="song-info" id="song-info-3">
          <div class="title">Falling Out</div>
          <div class="sub-line">
            <div class="subtitle">Otzeki</div>
            <div class="time">2.05</div>
          </div>
        </label>
      </div>
    </div>
    <div class="progress-bar">
      <span class="progress"></span>
    </div>
  </div>
</div> 
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  padding: 30px 10px;
  font-family: 'Poppins', sans-serif; 
  background-color: #000;
}  
input[type=radio] {
  display: none;
}

.card {
  position: absolute;
  width: 60%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transition: -webkit-transform .4s ease;
  transition: -webkit-transform .4s ease;
  transition: transform .4s ease;
  transition: transform .4s ease, -webkit-transform .4s ease;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: 800px;
  max-height: 600px;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
}

.cards {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}

#item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2 {
  -webkit-transform: translatex(-40%) scale(0.8);
          transform: translatex(-40%) scale(0.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1 {
  -webkit-transform: translatex(40%) scale(0.8);
          transform: translatex(40%) scale(0.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3 {
  -webkit-transform: translatex(0) scale(1);
          transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 1;
}
#item-1:checked ~ .cards #song-1 img, #item-2:checked ~ .cards #song-2 img, #item-3:checked ~ .cards #song-3 img {
  box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}

.player {
  background-color: #fff;
  border-radius: 8px;
  min-width: 320px;
  padding: 16px 10px;
  font-weight: 600;
}

.upper-part {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  margin-bottom: 12px;
  height: 36px;
  overflow: hidden;
}

.play-icon {
  margin-right: 10px;
}

.song-info {
  width: calc(100% - 32px);
  display: block;
}

.song-info .title {
  color: #403d40;
  font-size: 14px;
  line-height: 24px;
}

.sub-line {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  width: 100%;
}

.subtitle, .time {
  font-size: 12px;
  line-height: 16px;
  color: #c6c5c6;
}

.time {
  font-size: 12px;
  line-height: 16px;
  color: #a5a5a5;
  font-weight: 500;
  margin-left: auto;
}

.progress-bar {
  height: 3px;
  width: 100%;
  background-color: #e9efff;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  display: block;
  position: relative;
  width: 60%;
  height: 100%;
  background-color: #790c5a;
  border-radius: 6px;
}

.info-area {
  width: 100%;
  position: absolute;
  top: 0;
  left: 30px;
  -webkit-transition: -webkit-transform .4s ease-in;
  transition: -webkit-transform .4s ease-in;
  transition: transform .4s ease-in;
  transition: transform .4s ease-in, -webkit-transform .4s ease-in;
}

#item-2:checked ~ .player #test {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#item-2:checked ~ .player #test {
  -webkit-transform: translateY(-40px);
          transform: translateY(-40px);
}

#item-3:checked ~ .player #test {
  -webkit-transform: translateY(-80px);
          transform: translateY(-80px);
}
@media (max-width: 767px){
    .container{
        height:300px;
    }
}

Responsive 3D Touch Slider Carousel Design using Html & CSS.

HTML

CSS

JS

Leave a Reply Cancel reply

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript