How to customize CSS slider animation - sleek CSS slider with navigation feature?

My goal is to build a CSS-only automatic animated slider with navigation buttons. While the slider animation and navigation function separately, combining them causes the automatic animation to override the navigation system, preventing me from switching between slides using the buttons. How can I ensure that the animation does not overpower the navigation so that I can navigate between slides while maintaining the automatic scrolling feature? Below is my code:

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

figure p {
  position: absolute;
}

figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: center;
  transition: left 2s;
  animation: 20s slidy infinite;
}

.slider figure .slide {
  width: 25%;
  float: left;
}

.slider figure img {
  width: 100%;
  height: 300px;
}

.button_container {
  position: relative;
  top: -30px;
  text-align: center;
}

.slider_button {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0px 15px;
}

#slide-1:target~.slide_container {
  left: 0%;
}

#slide-2:target~.slide_container {
  left: -100%;
}

#slide-3:target~.slide_container {
  left: -200%;
}

#slide-4:target~.slide_container {
  left: -300%;
}

@keyframes slidy {
  0% {
    left: 0%;
  }
  21% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  46% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  71% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  96% {
    left: -300%;
  }
  100% {
    left: 0%;
  }
}
<div class="slider">
  <span id="slide-1"></span>
  <span id="slide-2"></span>
  <span id="slide-3"></span>
  <span id="slide-4"></span>

  <figure class="slide_container">
    <div class="slide">
      <p>Test1</p>
      <img src="https://via.placeholder.com/300?text=1" class="slider_image">
    </div>

    <div class="slide">
      <p>Test2</p>
      <img src="https://via.placeholder.com/300?text=2" class="slider_image">
    </div>

    <div class="slide">
      <p>Test3</p>
      <img src="https://via.placeholder.com/300?text=3" class="slider_image">
    </div>

    <div class="slide">
      <p>Test4</p>
      <img src="https://via.placeholder.com/300?text=4" class="slider_image">
    </div>

  </figure>

  <div class="button_container">
    <a href="#slide-1" class="slider_button"></a>
    <a href="#slide-2" class="slider_button"></a>
    <a href="#slide-3" class="slider_button"></a>
    <a href="#slide-4" class="slider_button"></a>
  </div>


</div>

htmlcssslidercss-animations

Answer №1

One approach is to define the same animation four times and upon clicking, activate the required one with a delay to display the target image. Following that, the slider will continue to run automatically. However, there will not be a transition when switching between images. It's uncertain if this is achievable with your current configuration.

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

figure p {
  position: absolute;
}

figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: center;
  transition: left 2s;
  animation: 10s slidy infinite;
}

.slider figure .slide {
  width: 25%;
  float: left;
}

.slider figure img {
  width: 100%;
  height: 300px;
}

.button_container {
  position: relative;
  top: -30px;
  text-align: center;
}

.slider_button {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0px 15px;
}

#slide-1:target~.slide_container {
  animation: 10s slidy1 infinite;
}

#slide-2:target~.slide_container {
  animation: 10s slidy2 infinite -2.5s;
}

#slide-3:target~.slide_container {
  animation: 10s slidy3 infinite -5s;
}

#slide-4:target~.slide_container {
  animation: 10s slidy4 infinite -7.5s;
}

@keyframes slidy {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy1 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy2 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy3 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy4 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
<div class="slider">
  <span id="slide-1"></span>
  <span id="slide-2"></span>
  <span id="slide-3"></span>
  <span id="slide-4"></span>

  <figure class="slide_container">
    <div class="slide">
      <p>Test1</p>
      <img src="https://via.placeholder.com/300?text=1" class="slider_image">
    </div>

    <div class="slide">
      <p>Test2</p>
      <img src="https://via.placeholder.com/300?text=2" class="slider_image">
    </div>

    <div class="slide">
      <p>Test3</p>
      <img src="https://via.placeholder.com/300?text=3" class="slider_image">
    </div>

    <div class="slide">
      <p>Test4</p>
      <img src="https://via.placeholder.com/300?text=4" class="slider_image">
    </div>

  </figure>

  <div class="button_container">
    <a href="#slide-1" class="slider_button"></a>
    <a href="#slide-2" class="slider_button"></a>
    <a href="#slide-3" class="slider_button"></a>
    <a href="#slide-4" class="slider_button"></a>
  </div>


</div>

Answer №2

@TemaniAfif got there first!
Even so, I put in the effort to make it functional, so here is the working code snippet with 5 keyframes (1 for the default and 1 for each slide with reorganized transform to ensure functionality). However, as Temani mentioned, there is no transition when switching animations:

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

figure p {
  position: absolute;
}

figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: center;
  transition: transform 2s;
  animation: 10s slidy infinite;
}

.slider figure .slide {
  width: 25%;
  float: left;
}

.slider figure img {
  width: 100%;
  height: 300px;
}

.button_container {
  position: relative;
  top: -30px;
  text-align: center;
}

.slider_button {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0px 15px;
}

#slide-1:target~.slide_container {
  animation: 10s slidy1 infinite;
}

#slide-2:target~.slide_container {
  animation: 10s slidy2 infinite;
}

#slide-3:target~.slide_container {
  animation: 10s slidy3 infinite;
}

#slide-4:target~.slide_container {
  animation: 10s slidy4 infinite;
}

@keyframes slidy {
  0% {
    transform: translateX(0);
  }
  21% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-25%);
  }
  46% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  71% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-75%);
  }
  96% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slidy1 {
  0% {
    transform: translateX(0);
  }
  21% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-25%);
  }
  46% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  71% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-75%);
  }
  96% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slidy2 {
  0% {
    transform: translateX(-25%);
  }
  21% {
    transform: translateX(-25%);
  }
  25% {
    transform: translateX(-50%);
  }
  46% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(-75%);
  }
  71% {
    transform: translateX(-75%);
  }
  75% {
    transform: translateX(0);
  }
  96% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}

@keyframes slidy3 {
  0% {
    transform: translateX(-50%);
  }
  21% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(-75%);
  }
  46% {
    transform: translateX(-75%);
  }
  50% {
    transform: translateX(-0%);
  }
  71% {
    transform: translateX(-0%);
  }
  75% {
    transform: translateX(-25%);
  }
  96% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes slidy4 {
  0% {
    transform: translateX(-75%);
  }
  21% {
    transform: translateX(-75%);
  }
  25% {
    transform: translateX(0);
  }
  46% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  71% {
    transform: translateX(-25%);
  }
  75% {
    transform: translateX(-50%);
  }
  96% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-75%);
  }
}
<div class="slider">
  <span id="slide-1"></span>
  <span id="slide-2"></span>
  <span id="slide-3"></span>
  <span id="slide-4"></span>


  <figure class="slide_container">
    <div class="slide">
      <p>Test1</p>
      <img src="https://via.placeholder.com/300?text=1" class="slider_image">
    </div>

    <div class="slide">
      <p>Test2</p>
      <img src="https://via.placeholder.com/300?text=2" class="slider_image">
    </div>

    <div class="slide">
      <p>Test3</p>
      <img src="https://via.placeholder.com/300?text=3" class="slider_image">
    </div>

    <div class="slide">
      <p>Test4</p>
      <img src="https://via.placeholder.com/300?text=4" class="slider_image">
    </div>

  </figure>

  <div class="button_container">
    <a href="#slide-1" class="slider_button"></a>
    <a href="#slide-2" class="slider_button"></a>
    <a href="#slide-3" class="slider_button"></a>
    <a href="#slide-4" class="slider_button"></a>
  </div>


</div>

Keep in mind that this solution has a downside where clicking on the "1" button and then again on the same button will not trigger any animation swap (since it doesn't switch animations).

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

Can CSS calc() achieve modulus behavior?

Is it possible to dynamically adjust the height of an element based on screen size using calc(), while still maintaining alignment with a specified baseline grid? The height should always be a multiple of the defined variable $baseline. I've noticed ...

cssresponsive-designsassbaseline

Can login data be transferred from the index page to other pages?

Working on a school project involving a Weather info web page has been quite the journey. Most of it is complete, except for one issue that I can't seem to figure out. The index page with login and registration functions is connected to phpmyadmin/mys ...

phphtmlauthenticationsessionregistration

What's the best way to adjust text color to black or white for maximum contrast when the background changes?

Currently, I am attempting to replicate the email element found on this website: .custom-blend-mode { mix-blend-mode: difference; } Although I have managed to make it work, it results in a change to the opposite color. Ideally, I would like it to remai ...

javascripthtmlcss

Ensure that the text within the ng-repeat is wrapped in a span element and each

When using ng repeat in span, I encountered a word breaking into a new line. Here is the actual output: https://i.stack.imgur.com/k4c9k.png To style this, I implemented the following CSS: border: 1px solid #ECE9E6; border-radius: 3px; text- ...

htmlcssangularjs

Angular 6 animation moving forward (utilizing animation-fill-mode in Angular)

My CSS animated property is functioning properly with the code snippet below: animation: collapse1 0.3s forwards; However, I now need to transition to Angular animations. Everything is working correctly, except for one issue: once the animation completes ...

javascriptcssangularanimationangular6

Creating unique styles with styled components without the use of selectors

Is it possible to achieve contextual styling without using CSS selectors? For example: <Button primary> <Text>BUTTON</Text> // if the button is primary then have 20px padding else 0 <Icon/> // if the button is primary then ...

cssreactjsreact-nativestyled-components

Tips for resolving conflicts between CSS files

My index.html file contains multiple css and js files, including MaterializeCSS and a style.css file. However, when both are included simultaneously, using elements from Materialize such as tabs results in them not appearing correctly. Despite initializing ...

htmlcssmaterialize

Bootstrap Modal closing problem

While working on a bootstrap modal, I encountered an issue where the modal contains two buttons - one for printing the content and another for closing the modal. Here is the code snippet for the modal in my aspx page: <div class="modal fade" id="myMod ...

javascriptjqueryhtmlcsstwitter-bootstrap

Connect the blade.php file with CSS in Laravel version 5.x

I placed my view.blade.php file in resources\views\admin\login\view.blade.php and used the following code to link it to the CSS file: <link href="{!! HTML::style('css/style.css') !!}" rel="stylesheet">. My CSS file is lo ...

phpcsslaravellaravel-blade

Having Trouble with Jquery Toggle Function!

I have put together a small Jquery script after much contemplation (since I am new to this), and unfortunately, it is not working as expected! Here's the issue: in my code, I want to click on an element defined by the variable trigger, and when clicke ...

htmljquery-uitogglejquery

Understanding image sizes for uploads on Tumblr can be a bit confusing, especially when comparing pages to posts. Learn how to implement lazyloading for post

I'm currently working on a highly customized Tumblr account that features a mix of pages and posts. I am looking to access content and assets, particularly images, from these pages/posts for use in other parts of the site. When I upload an image to a ...

javascripthtmllazy-loadingtumblrtumblr-themes

Which is better for cycling through a list of items: CSS or JavaScript?

Currently, I have a navigation bar set up as an unordered list (<ul>), but some list items are not visible. I want to implement functionality where clicking arrows will move the elements left or right by hiding or showing the leftmost or rightmost it ...

javascriptcss

Prevent horizontal HTML scrolling while displaying a layer

I am currently working with a .layer div element that darkens the page to highlight a modal. However, I have encountered an issue where upon triggering the event, the div does not occupy 100% of the screen and the original browser scroll bar disappears. I ...

javascriptcss

Tips for implementing simple custom styling within an Angular application without relying on innerHTML

Seeking advice on the best practices for a specific scenario. I am currently developing a small Angular application where users can input text. I would like to allow them to easily make certain words bold or create links. For example, if they type *whatev ...

htmlangular

Tips for displaying a multi-select dropdown in the Creative Tim Angular Material Pro filter panel

I am in need of assistance with modifying the standard Creative Tim Angular Pro Material template due to my limited CSS/SCSS skills. Could someone provide examples of the necessary changes, whether it involves altering the HTML or multiple CSS files withi ...

htmlangulartypescriptangular-material

Display the Angular UI grid containing data from the textboxes once the information has been submitted

I recently started working on an angularjs application and I am facing some challenges in finding the solution. Any advice or suggestions would be greatly appreciated. My goal is to dynamically display an angular UI-grid based on the text selected in the ...

javascripthtmlangularjsangularjs-directiveangular-ui-grid

Modify the background color of a particular row in a dynamic table with the help of AngularJS

My dynamic table consists of the following: <table id="thetable"> <tr> <th class="th2">&nbsp;&nbsp;Id&nbsp;&nbsp;</th> <th class="th2">&nbsp;&nbsp;Attivo ...

javascripthtmlcssangularjsangularjs-ng-repeat

What is the best way to arrange text inputs in alignment?

I encountered an issue while creating a form that includes fields for username, password, and email. The alignment of the email input box seems to be off when compared to the username and password input boxes. Is there a method to ensure that all the input ...

htmlcss

midway through processing HTML form

In the past, I have come across web forms that span multiple pages. If invalid information is entered on any page, it triggers an error message and requires the user to rectify their input. Despite this, I am having trouble locating resources to guide me ...

html

The background color in CSS remains stagnant, refusing to change despite

Can someone help me figure out why the background color isn't changing in my simple code? I've double-checked that the external CSS is properly linked because the text color of h1 is changing. <!DOCTYPE html> <html> < ...

css