Styling tricks for rotating carousel images using CSS animations

I'm currently working on a carousel component that functions without the use of JavaScript.

While I have made significant progress towards my goal, I am facing challenges with the animation itself.

The desired behavior is for the slides to animate one after another continuously. For example, I want the "A" box to follow the "G" box in the sequence.

I am determined to make this code work without relying on JavaScript. Any suggestions or tips to enhance the code and accomplish this objective would be greatly appreciated!

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


.st-carousel-container {
            display: flex;
            align-items: center;
      
      position: absolute;
      top: 0;
      align-items: center;
      bottom: 0;
      left: 0;
      right: 0;
        }

        .st-carousel {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding-left: 48px;
            padding-right: 48px;
            position: relative;
        }

        .st-carousel__screen {
            overflow: hidden;
            margin-left: -16px;
            margin-right: -16px;
        }

        ...
        

<div class="st-carousel-container">
        <div class="st-carousel">
            <div class="st-carousel__screen">
                <div class="st-carousel__track">
                    <div class="st-carousel__item st-demo-in-1 st-demo-in-2 st-demo-in-3">
                        <div class="st-carousel__item-content">a</div>
                    </div>
                    ...
                    <div class="st-carousel__item st-demo-in-1 st-demo-in-2 st-demo-in-3">
                        <div class="st-carousel__item-content">g</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

If you check out this link and view the autoplay sample, it depicts exactly what I aim to achieve!

htmlcss

Answer №1

If you need a reference link that may assist you, please take a look at the following:

Click here

Just as an example: 

    * {
      box-sizing: border-box;
    }
    
    .slider {
      width: 300px;
      text-align: center;
      overflow: hidden;
    }
    
    .slides {
      display: flex;
      
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      
      
      
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      
      /*
      scroll-snap-points-x: repeat(300px);
      scroll-snap-type: mandatory;
      */
    }
    .slides::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    .slides::-webkit-scrollbar-thumb {
      background: black;
      border-radius: 10px;
    }
    .slides::-webkit-scrollbar-track {
      background: transparent;
    }
    .slides > div {
      scroll-snap-align: start;
      flex-shrink: 0;
      width: 300px;
      height: 300px;
      margin-right: 50px;
      border-radius: 10px;
      background: #eee;
      transform-origin: center center;
      transform: scale(1);
      transition: transform 0.5s;
      position: relative;
      
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 100px;
    }
    .slides > div:target {
    /*   transform: scale(0.8); */
    }
    .author-info {
      background: rgba(0, 0, 0, 0.75);
      color: white;
      padding: 0.75rem;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      margin: 0;
    }
    .author-info a {
      color: white;
    }
    img {
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .slider > a {
      display: inline-flex;
      width: 1.5rem;
      height: 1.5rem;
      background: white;
      text-decoration: none;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin: 0 0 0.5rem 0;
      position: relative;
    }
    .slider > a:active {
      top: 1px;
    }
    .slider > a:focus {
      background: #000;
    }
    
    /* Button navigation not required */
    @supports (scroll-snap-type) {
      .slider > a {
        display: none;
      }
    }
    
    html, body {
      height: 100%;
      overflow: hidden;
    }
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to bottom, #74ABE2, #5563DE);
      font-family: 'Ropa Sans', sans-serif;
    }
<div class="slider">
  
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>
  <a href="#slide-5">5</a>

  <div class="slides">
    <div id="slide-1">
      1
    </div>
    <div id="slide-2">
      2
    </div>
    <div id="slide-3">
      3
    </div>
    <div id="slide-4">
      4
    </div>
    <div id="slide-5">
      5
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the Power of jQuery Event Attributes

Can someone explain the distinct difference between the keys delegateTarget and currentTarget in the jQuery event object? $(this).on('click',function(event){ console.log(event.delegateTarget); console.log(event.currentTarget); ...

htmljquery

Error: Trying to access 'MaterialModule' before it has been initialized results in an uncaught ReferenceError

I have been working on a form for a personal project and attempted to implement a phone number input using this example: . However, after trying to integrate it into my project, I encountered an error. Even after removing the phone number input code, the e ...

htmlangulartypescript

Should I be concerned about including a non-existent CSS class?

When it comes to using jQuery and finding the values of text fields, adding classes seems like a common practice. However, I am concerned about how this may impact page loading. Is it efficient for the browser to search for all these classes? In the past, ...

asp.netcssjquery-selectors

What is the recommended way to include an image in a v-for loop in Vue.js?

I have attempted various online solutions, but I am still unable to display images on the screen. Could it be a simple mistake? The file names and folders are accurate. When providing the path, I aim to retrieve the image associated with the sub-club name ...

javascripthtmlcssimagevue.js

What is causing the 'transitionend' event to trigger multiple times?

Currently, I'm honing my JavaScript skills by taking on the 30 days of JavaScript challenge. I'm puzzled by why the 'transitioned' event is triggered twice in the code snippet below. My CSS only contains one property called transform, ...

javascripthtml

When adding margin-left and margin-right, images do not appear in their designated positions

I have a chart displaying images, which are showing up correctly. However, I am facing an issue when I try to add some spacing to the chart by using margin-left and margin-right. Here is the CSS code I included: #chart1 { margin: 0 auto; ...

javascripthtmlcss

How to set the default value of a select dropdown in PHP

I came across this snippet of code: <td> <select class="versionSelect"> <option value="5" <?php if($item->version === "5") echo "selected='selected'"; ?>>5</option> <option value="6" <?php ...

phphtml

Issues with connecting static files in express.js

Hey there! I'm having an issue with the redirect not working when I click the "Submit" button on the login page. The code in my index.js file looks like this: app.use(bodyParser.urlencoded({ extended: true })); app.use(express.static(path.join(__dir ...

javascriptcssexpress

What is the best way to retrieve a lengthy HTML page string parameter from a Java request?

While working with Javascript, I encountered an issue with sending HTML pages in post data. In my Java code, I used String html = request.getParameter("templateHtml"); and during debugging, I could see the HTML string in the request. However, the "html" va ...

javajavascriptjqueryhtmlajax

Altering various HTML components with every swipe of SwiperJS

I am new to working with JavaScript and I have integrated a Swiper JS element into my HTML page. Here is the current code I am using: <head> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css&quo ...

javascripthtml

Modify content or display picture within accordion panel based on its identifier

In my view, I have a model representing a list of items. Each item has a unique ID, which is included in the H2 header tag. The details of each item are displayed in a div below the header. Initially, there is an image within the header that is set to disp ...

javascriptjqueryhtmlcssjquery-ui

Unable to toggle class feature

I have a trio of play buttons for a custom player setup, displayed like so: <div> <div class="gs-player"> <div id="gs1" onclick="play(309689093)" class="fa fa-3x fa-play"></div> </div> <div class="gs-player"> ...

jquerycss

What steps can be taken to ensure the Instagram logo remains visible even when it is being hovered over?

Struggling to incorporate a social media icon on my website, I am facing an issue where the Instagram icon outline disappears on hover due to the gradient styling in CSS3. Below is my current code: .social-icons li.instagram a { border-radius: 50%; ...

cssinstagram

Iterate over div elements using jQuery

I am experimenting with creating a jQuery slider using divs: <div id="block-1"> <div id="bannerleft"> <div class="wsite-header-1"></div> </div> <div id="bannerright"> < ...

jqueryhtmljquery-slider

Adding graphs dynamically to Dygraphs allows for real-time updates and interactive data

I recently started using Dygraphs for one of my projects and I am still learning how to work with it. After reading through the documentation and looking at a few examples, I noticed that the constructor for Dygraphs requires a div element where the graph ...

javascriptjqueryhtmldygraphs

I envision my home page being divided into two visually stunning full-screen sections, each taking up the entire height of the page

I am currently working with the code shown below. It successfully displays the first part in full height, regardless of resolution, but once I scroll to the second half, there is a large empty gap. How can I eliminate this gap and make the transition smoot ...

htmlcssviewport-units

Shift the plus-minus icon on the bootstrap accordion all the way to the right side

I'm struggling to adjust the position of the plus-minus icon on a Bootstrap accordion to the far right, but my current code isn't producing the desired result. Here's the CSS snippet: .mb-0 > a:before { float: right !important; ...

htmlcsstwitter-bootstrap-3

What is the reason for the attribute align="center" functioning in my HTML document?

Recently, I decided to delve into the world of HTML and created a simple basic file: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> My Webpage </title </head> ...

htmlalignment

center items alignment with hidden tags

I'm currently facing an issue with the CSS property display: flex, align-items: center Here is a snippet of my HTML and CSS files: * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Kumbh Sans', sans-serif; } .na ...

htmlcss

In Safari, my layout is disrupted by the mere mention of the word 'City'

There's something strange happening in Safari that I can't quite figure out. Here's how my layout looks in Chrome: https://i.sstatic.net/lPhnP.png But when viewed in Safari, it looks like this: https://i.sstatic.net/IMnQb.png For some r ...

htmlcssbootstrap-4web-frontend