Is there a way to set this CSS slider to only autoplay?

Is it possible to set this slider to autoplay using simple CSS without LESS? The author of the slider used LESS, but I will be using plain CSS in my case. Can someone please point out where the @animation should be added to enable autoplay?

Check out the code on Codepen: https://codepen.io/drygiel/pen/rtpnE

Thank you!

Below is the simple CSS code (without LESS):

.csslider {
  -moz-perspective: 1300px;
  -ms-perspective: 1300px;
  -webkit-perspective: 1300px;
  perspective: 1300px;
  display: inline-block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}
.csslider > input {
  display: none;
}
...
/* More CSS code here */
...

Answer №1

Auto-play functionality can be achieved using either JS or CSS3 animations.

Check out a demonstration here:

http://codepen.io/drygiel/pen/xjJsC

For more details, refer to the source of this answer:

https://github.com/drygiel/csslider/issues/1

(Written by Damian Drygiel)

CODE:

- var config = { 
-   count: 6,                // total count of slider slides
-   default_slide: 1,        // initial slide displayed   
-   infinity: true,          // keep navigation arrows always visible
-   inside: false,           // show navigation dots inside slider box
-   group_name: 'slides',    // unique group name for each slider on page 
-   presentation_mode: false, // if false displays skeleton only
- }

if(config.presentation_mode) 
  h1(style="padding-top: 60px;") CSS Slider
  h2 Pure CSS Slider. No JS. Because it is possible!

// The rest of the code continues...

CSS Styles:

JavaScript:

// Autoplay snippet

setInterval(function() {
  var $curr = $('#slider1 input[type=radio]:checked');  
  var $next = $curr.next('input');
  if(!$next.length) $next = $('#slider1 input[type=radio]').first();
  $next.prop('checked', true);

}, 2000);

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

Is there a way to customize the color of a MUI styled component?

I have a customized MUI component that displays a circular badge in green. const StyledGreenBadge = styled(Badge)(({ theme }) => ({ '& .MuiBadge-badge': { backgroundColor: '#44b700', color: '#44b700', ...

What steps should I follow to create a photo gallery similar to Facebook?

I am currently developing a 4x3 image gallery showcasing pictures sourced from a database. Each picture varies in size. Utilizing Bootstrap and CodeIgniter, I create rows and columns for each image. My goal is to ensure that wide images adjust to the heigh ...

What is the best way to interact with an element in Python Selenium once it has been located?

I have been working on a script that is supposed to retrieve the attribute of an element and then click on it if the value is true. However, I keep encountering an error in my code. This is the snippet of code I am using: from selenium import webdriver d ...

What are the steps to enlarge the logo in the header of a WordPress website?

I recently added a logo to my website located at www.theestablishmenthairdressing.com, but I am encountering an issue where the logo appears very small in the top-left corner of the header. Upon inspecting the code using Safari, it seems that there is a s ...

Any ideas on what to do now that the navbar-default has apparently been removed in Bootstrap 4 (beta 2

The navbar-default class in Bootstrap 3 had a sleek linear-gradient background and a few other appealing features. Unfortunately, it appears to have been removed in Bootstrap 4 beta 2. Before attempting to manually replicate the desired effect, I wanted ...

The HTML body is given a right margin for proper spacing

Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...

What is the most crucial element to focus on when initially building a website?

I have recently embarked on the journey of learning various programming languages for web development, and I strongly believe that the best way to enhance my skills is by brainstorming ideas and bringing them to life through coding. (Please feel free to co ...

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

My mind is racing with this problem and I'm not sure if it's solvable, but before throwing in the towel, I thought I'd seek help from the Internet Gods. Here's a visual representation of what I'm aiming for: I want the text to al ...

The Bootstrap nav-justified feature fails to utilize the entire width available

Have you heard of the bootstrap-4 class called nav-pill? It's meant to make links have equal width and occupy all horizontal space. To achieve equal-width elements, simply use .nav-justified, as suggested. This will ensure that nav links take up al ...

ReactJS aligns buttons to the right

I have been attempting to align a button to the far right without success. Here is what I have tried: <Button variant="contained" style={{display: 'flex', justifyContent: 'right'}} color="primary" className="float-right" onClick={ ...

As the browser window gets smaller, my side drawer starts to shrink in height

I'm currently working on a project that is supposed to have a certain look and feel. https://i.sstatic.net/xmDtH.png As part of the project, I created a collapsible side drawer. I positioned it absolutely to the document body with left 0 and top set ...

When a child element with float:left is present, the parent div fails to accurately detect the child's height

The center-content element should adjust its height according to its child elements. However, if I apply float:left to one of its child elements, like the leftContent element, leftContent will extend 95% of its body outside the center-content. This is beca ...

Customize the background color of a Material UI row with varying colors for each cell

I am facing an issue with a Material UI table in React 18 where each cell has a different background color, causing the hover style on the row to break. Despite trying various solutions, I have been unable to find a resolution. For reference, you can see ...

The border styling for top and bottom of table rows in Bootstrap seems to be malfunctioning

I am trying to format my table to look like the one shown in https://i.sstatic.net/FEPyL.jpg My goal is to add top and bottom borders to each row (tr) of my table, similar to what is depicted in the image. While I managed to get one border working, the ot ...

The alignment of the image is malfunctioning

I'm currently in the process of creating a personalized website for my niece, designed to be akin to a homepage just for her. While I have some experience with coding, I've hit a roadblock when it comes to positioning an image on the page. Someth ...

Any tips on getting my Squarespace Cover page video to resize properly?

I recently implemented a cover page with a looping video background on my Squarespace site. The video used to automatically resize to fit the browser window perfectly, but now it seems to be playing at its full resolution. I don't have much experience ...

Webpack 2 fails to compile CSS within Vue files

Greetings, lovely individuals, I am currently facing an issue with compiling CSS for Vue components. You can view my configuration file here: https://gist.github.com/lavezzi1/27817a17cb4fa2a092e701089ecae0ec When working on a multiple page app using Vue, ...

Having difficulties with applying styles to links in SCSS

I've been attempting to customize the styling of <a href=""></a> elements on my webpage. Unfortunately, the code I've tried isn't producing the desired results. Here is the HTML: <div class="class-name"> The quick bro ...

I am attempting to arrange 9 images in a grid format of 3 rows by 3 columns to create a seamless

I am currently working on setting up a 3x3 grid on my website with 9 images and text underneath. The first 6 images are displaying as I intended, but when I add the last 3 images, the layout gets messed up. The first image jumps under the 3rd image on the ...

Switching the background hue of the chat box after each message

Does anyone know how to change the colors of each message in a chat window using CSS and HTML? I'm trying to customize my stream but can't figure it out. Here is an example for reference. ...