Card carousel rotation

Apologies for the vague title, I'm unsure how to properly label my issue.

I have a section set up with cards, but I'm aiming to create something resembling a menu that functions like a carousel. Essentially, I want to include right and left arrows that, when clicked, reveal more cards in a sliding motion. Although it sounds similar to a carousel, I haven't been able to achieve the desired effect yet. Here's an example image of what I'm envisioning:

https://i.sstatic.net/My59v.jpg

<section id="tres">
        <h1> TEST </h1>
    <hr>

    <div id="cards02">

    <div class="card" style="width: 25rem;" id="card-1">
  <img class="card-img-top" src="idosa.png" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">TEST
</h4>
   <h6> 13 Outubro 2017</h6>
    <p class="card-text">TEST TEST TEST  </p>
    <a href="#" class="btn btn-primary">TEST </a>
  </div>
</div>




    <div class="card" style="width: 25rem;" id="card-2">
  <img class="card-img-top" src="idosa.png" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">TEST TEST TEST 
</h4>
   <h6> 13 Outubro 2017</h6>
    <p class="card-text">TEST TEST TEST </p>
    <a href="#" class="btn btn-primary">TEST </a>
  </div>
</div>
    <div class="card" style="width: 25rem;" id="card-3">
  <img class="card-img-top" src="idosa.png" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">>TEST TEST TEST 
</h4>
   <h6> 13 Outubro 2017</h6>
    <p class="card-text">TEST </p>
    <a href="#" class="btn btn-primary">TEST</a>
  </div>
</div>

    </div>  

    </section>
jquerycsshtmlbootstrap-4

Answer №1

If you're aiming to create a carousel feature on your website, it requires more than just basic HTML knowledge. You'll have to delve into JavaScript and CSS for a more customized design. Alternatively, you can utilize libraries like bootstrap or slick to simplify the process. However, if you prefer creating your own carousel, there are plenty of tutorials available online that can guide you through the steps. Just search for "carousel JS CSS tutorial" to get started on this journey.

Answer №2

If you're looking for a vanilla JS carousel, I've got just the thing for you. This carousel automatically slides through its elements but also gives users the option to manually control it by clicking on the arrows. If you want to display multiple elements at once instead of just one, you can easily make some adjustments to the code.

//I made a tweak so that the first image starts at index 1 instead of 0
var index = 1;
var paused = false;
var slideShow = [];

for (i=0; i<document.getElementsByClassName("slideShow").length; i++) {
  slideShow[i] = document.getElementsByClassName("slideShow")[i];
  slideShow[i].style.display = "none";
}

slideShow[0].style.display = "inline";

var slides = setInterval(function() {
  if (index < slideShow.length) {
    index++;
showDivs();
  }
  else {
index = 1;
showDivs();
}
},1000);

function control(n) {
  clearInterval(slides);

  if (index+n > slideShow.length) {
    index = 1;
  }
  else if (index+n <= 0) {
    index = slideShow.length;
  }
  else {
index += n;
  }
  showDivs();
}

function showDivs() {
  //Hide all slideShow elements, then only show the targeted element
  for (let i=1; i<=slideShow.length; i++) {
    slideShow[i-1].style.display = "none";
  }
  slideShow[index-1].style.display = "inline";
}
<button  onclick="control(-1)" class="arrows" id="left"><</button>
<p class="slideShow">1</p>
<p class="slideShow">2</p>
<p class="slideShow">3</p>
<p class="slideShow">4</p>
<p class="slideShow">5</p>
<button onclick="control(1)" class="arrows" id="right">></button>

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

Php file not receiving data from ajax post method

forget.php PHP: if (! (empty($_POST['emailforget'])) ) { echo "here in the function"; } else { echo "here"; } AJAX: $("#passreset").on('click', function(e) { var emailforget = $("#tempemail").val(); alert(emailforget); ...

javascriptjqueryajax

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

In the process of developing my VueJS project, I have successfully implemented a series of cards on the page. However, I am now facing a challenge - when a user selects one of these cards, I want it to move to the center of the screen while maintaining its ...

javascripthtmlcssdom

SliderToggle and Div implementation in Internet Explorer (IE) using jQuery

I'm encountering an issue with jQuery's slideToggle function and a div specifically in IE. Here is the code snippet causing the problem: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d ...

jquerycssinternet-explorer

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

cssruby-on-railsnavbarbootstrap-4

Manage Raspberry Pi through a local website

Seeking guidance on creating a system where pressing a button on a webpage triggers a signal to a raspberry pi. For example, clicking on button1 on my laravel-built website initiates operation1 on the raspberry pi side, which will be using a .Net App. An ...

html.nettcpraspberry-pi

Guide to swapping images using HTML forms and JavaScript

I have been attempting to create an image swapping code using a form with two drop-down options. The options are for color choices for an item, in this case, let's call it a widget, with both exterior and interior colors. I have been brainstorming on ...

javascriptjqueryhtml

How can a div be utilized to create a footer with two columns?

Is there a way to design a two-column footer using only divs and no tables? The dimensions of the footer are set at 980px and it needs to include... Copyright 2010 xyz.com (to be placed on the left side) About us | privacy | terms (to be placed on the r ...

cssxhtmlhtml

Alphabetic divider for organizing lists in Ionic

I am currently working with a list in ionic that is fetched from a controller and stored in localStorage. My goal is to add alphabetic dividers to the list, but I am facing some confusion on how to achieve this. Here is a snippet of the code: app.js $ion ...

javascripthtmlangularjsionic-framework

What is the best way to populate a JSP session with a jQuery value?

Here is the code I need help with: <form name="f"> <input class="btn" type="button" onclick="submitForm()" value="OK" id="submitButton" name="submitButton"/> <input type="text" id="browser_version" name="browser_version" /> <br /> ...

javajqueryjsp

Using asynchronous JavaScript (AJAX) to request a file to be processed on the client-side

I have a query that I need help with: My goal is to retrieve a file from the server after it has undergone input-dependent processing through an AJAX request (such as using jQuery). However, I don't want to directly offer this file for download in th ...

javascriptjqueryajaxdjangofile-handling

Retrieve information for AJAX tooltip from a specific URL

I am currently utilizing a script for tooltips. Is there a method available to dynamically load the content of a tooltip from a URL (using dynamic content loaded from a PHP script) rather than specifying the path to an html/php file? For Example What I ...

javascriptphpjqueryajax

Executing a Vue method from the main.js file within a Vue.js document

Why can't I call my method in App.vue? Shouldn't the div with id='App' in the App file allow me to access methods within it? Main.js new Vue({ render: h => h(App), methods:{ gesamt:function () { return 'Hello&a ...

javascriptvue.jsbootstrap-4

What methods can be used to restrict users from navigating to the previous or next page while they are scrolling horizontally within a scrollable div?

Experiencing a frustrating UX issue that arises from using a wide table within a scrollable div on a webpage. The problem occurs when users scroll horizontally using a trackpad on a mac, they sometimes unintentionally trigger the "go to next/last page" fe ...

htmlcssbrowseruser-experience

JQuery Mobile Navigation with Bootstrap 3 Sidebar on the Go

While using RoR, I encountered a baffling issue. I have created a new navbar with a sidebar that only displays on mobile and not on desktop. The Turbolink is functioning properly. <%= javascript_include_tag 'application', 'data-turboli ...

javascriptjqueryhtmlruby-on-railsturbolinks

What is the best way to randomly display an image from a JavaScript array within an HTML document?

I currently have this code in my HTML and JavaScript files, but I am having trouble with displaying images without using a URL in the JavaScript file. The images are located in my project folder. However, when I open the HTML file, the images do not appear ...

javascriptjqueryhtmlimagegenerator

Positioning images within a relatively positioned div using absolute positioning

I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { positio ...

htmlcsscss-position

Exploring the world of mouse events in Typescript using JQuery, all the while maintaining strict typing regulations

I'm currently working on a project that involves using JQuery in Typescript. One challenge I'm facing is passing a mouse event from a JQuery element to a wrapper class. Here's an example of what I'm trying to achieve: import * as $ fro ...

jquerytypescripttypes

Modifying the database by transforming a table row selection

I'm currently working on a select box that is part of every row in a table. My goal is to enable users to change the value in the select box, triggering an update to MySQL without requiring a page reload. I've managed to achieve this using Ajax ...

jqueryajax

Javascript problem: Trouble with event.clientX position

I found a great resource on learning javascript at this website, I'm having trouble understanding the code snippets in function XY(e, v), specifically these two lines: event.clientX + document.documentElement.scrollLeft and event.clientY + document ...

javascripthtmlinternet-explorer

Create a div element within the parent window of the iFrame

I'm trying to figure out how I can click a button within an iFrame that contains the following code: <td class="id-center"> <div class="bs-example"> <a id="comments" href="comments.php?id=$id" name="commen ...

javascriptjqueryhtmliframe