Is it possible to create a "text carousel" using HTML, CSS, and JavaScript?

Currently, I am in the process of building a 'text carousel' on my own, without seeking assistance. The progress so far can be viewed here (please stretch it out, as it is not responsive yet). Specifically, I am aiming to replicate the text carousel found in the testimonials section after scrolling down on this website. I have analyzed their approach, which utilizes Bootstrap. However, I am determined to achieve this without Bootstrap, solely relying on HTML, CSS, and potentially some JavaScript.

Upon examining text carousels on CodePen, I have noticed that most of them feature only one text field, whereas I aspire to incorporate a minimum of two text fields.

I appreciate any assistance provided. Thank you.

PS: The icons .fa-angle-left and .fa-angle-right are originally from FontAwesome, but I have swiftly replaced them with images sourced from Google.

javascriptjqueryhtmlcsscarousel

Answer №1

It's great to see you taking initiative to learn how to do things on your own! Keep up the good work!

There are several ways to achieve the desired behavior. I won't provide the exact code, but here are some steps for you to explore and learn from:

Firstly, add more .tekstbalonvolledig divs to test your setup.

Next, consider the CSS part:

1 - Wrap the .tekstbalonvolledig divs in a .wrapper div with a width of 1000px

2 - Apply overflow: hidden to the .overlaycontainer

Moving on to the JS part:

1 - Develop a function that animates a margin-left of -500px on the .wrapper

2 - Attach a click event listener to the .fa-angle-left element to execute this function

There are many more enhancements you can make to your carousel, but I hope these steps provide a good starting point for you :)

Answer №2

Here is the code snippet for a carousel:

Below is the HTML code:

<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
 </head>
  <section id="carousel">                   
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="quote"><i class="fa fa-quote-left fa-4x"></i></div>
            <div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="3000">
              <!-- Carousel indicators -->
              <ol class="carousel-indicators">
                <li data-target="#fade-quote-carousel" data-slide-to="0"></li>
                <li data-target="#fade-quote-carousel" data-slide-to="1"></li>
                <li data-target="#fade-quote-carousel" data-slide-to="2" class="active"></li>
      ...
     </div>
  </div>
     </div>
</section>

Below is the CSS code:

         section {
padding-top: 100px;
padding-bottom: 100px;
       }
  ...

You can view the full code and functionality in action by visiting this link.

Make sure to include the necessary Bootstrap and jQuery library files for proper functionality.

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

When exporting Datatable to Excel in PHP, zero values are displaying incorrectly

When exporting an excel sheet from a datatable using plugins, all values are coming through correctly except for zero (0) values. Here is the code snippet for the datatable: $('#example').DataTable({ //"scrollY": 300, ...

phpjqueryexceldatatable

Exploring the concepts of nested If statements, for loops, and else if ordering within Javascript programming (FreeCodeCamp - lookUpProfile)

Currently tackling Free Code Camp's Javascript tutorials and encountering a roadblock on the "Contact Profile" <a href="https://www.freecodecamp.com/challenges/profile-lookup#?solution=%2F%2FSetup%0Avar%20contacts%20%3D%20%5B%0A%20%20%20%20%7B%0A%2 ...

javascriptif-statementfor-loop

How can I ensure that Mongoose is case sensitive?

Currently, our authentication system is case sensitive for the email input. However, I would like to make it case insensitive. Here is the function in question: Auth.authenticate({ email, password }) Auth represents a mongoose Model that stores users in ...

javascriptnode.jsmongodbmongoose

Retrieving the Top 10 Values from a JSON Data Set

Take a look at this snippet from my JSON data. [ {"Element":"Water","Value":20}, {"Element":"Fire","Value":30}, {"Element":"Earth","Value":40}, {"Element":"Air","Value":50}, {"Element":"Spirit","Value":60}, {"Element":"Sun","Value":100}, { ...

javascripthtmlarraysjsonparsing

How to incorporate template literals when sending JSON responses in Node.js?

Utilizing express and aiming to return some JSON, I am considering using a template literal. Here is my current approach: resp.status(201).json({ message: "Customer added to database", url: "http://localhost:5000/Customer/" + doc._id ...

javascriptjsonnode.jsexpress

Can you create a stroke that is consistently the same width as the container BoxElement?

Utilizing a BoxElement provided by the blessed library, I am showcasing chat history. New sentences are inserted using pushLine. To enhance readability, days are separated by lines (which are added using pushLine). The width of each line matches that of t ...

javascriptnode.jstuiblessed

I am experiencing an issue where the button I place inside a material-ui table is unresponsive to clicks

Here is the structure of my table: <TableContainer component={Paper} style={{height: "40vh", width: "90vh"}}> <Table size="small" sx={{ minWidth: 200 }}> <TableHea ...

javascriptreactjsmaterial-uijsx

Tips for preserving updates following modifications in Angular 5/6?

I'm currently working on enhancing the account information page by implementing a feature that allows users to edit and save their details, such as their name. However, I am encountering an issue where the old name persists after making changes. Below ...

javascriptangulartypescript

Encountering a problem when transitioning Bootstrap 3 code to version 5

After finding this template on github, I noticed it was a bit outdated with the use of Bootstrap 3. I decided to update it to Bootstrap 5 and replaced the Bootstrap 3 CDN accordingly. However, upon doing so, I encountered some issues. Can anyone help me ...

htmlcssbootstrap-4frontendbootstrap-5

What are the effects of calling callback(false) and callback(true)?

I'm currently diving into a nodejs chat project, and I’m a bit confused about the outcome when callback(false) and callback(true) are triggered in this context... io.sockets.on('connection', function(socket){ socket.on('new user& ...

javascriptnode.jscallback

The combination of a modal box, checkbox, and cookie feature creates

I am trying to accomplish the following tasks: When the homepage loads, I want a modal box to appear Inside the modal box, there should be a form with a mandatory checkbox After checking the checkbox, submit the form and close the modal box to return to ...

javascriptjquerycookiescheckboxmodal-dialog

What is the method for retrieving a temporary collection in a callback function when using node-mongodb-native find()?

Is it possible to retrieve a temporary collection from a find() operation instead of just a cursor in node-mongodb-native? I need to perform a mapReduce function on the results of the find() query, like this: client.open(function(err) { client.collect ...

javascriptnode.jsmongodb

Issues with npm installation

Having trouble installing 'react-navigation' in my expo (react native) project using the command 'npm install --only=dev react-navigation'. I keep receiving warnings and am unsure how to proceed. See image link for details: enter image ...

javascriptreactjsreact-nativenpmnpm-install

Creating an infinite loop of SVG rectangles pulled from a database

As I extract svg rectangles from a database using Python, I find myself hardcoding the process in order to change the colors of each rectangle in my CSS style sheet. With potential scalability issues in mind - if there were 100 rectangles - I am wondering ...

pythoncssmysqlsvg

Clearly define where each navigation bar item should be displayed within your Django application using Bootstrap

I've been attempting to specify the exact page where this navbar dropdown should be displayed. I attempted adding this line: {% if request.resolver_match.url_name == 'club_selection' %} class = "active" {% endif %} but it doesn&ap ...

htmldjangotwitter-bootstrap

determine function output based on input type

Here's a question that is somewhat similar to TypeScript function return type based on input parameter, but with a twist involving promises. The scenario is as follows: if the input is a string, then the method returns a PlaylistEntity, otherwise it ...

javascripttypescriptgenericsconditional-types

What is the best way to assign a series of radio buttons to an array within an Angular controller's model?

Let's say I have a controller that contains an array property named 'houses'. I want to use ng-repeat to display this array on a table row with a set of radio buttons (true/false, etc.). How can I ensure that selecting any of these radio but ...

javascriptangularjs

ng-repeat did not properly listen for changes in the radio box selection

Feeling a bit confused here. I'm trying to call a function on change and pass the obj to it. From what I understand, since it's bound to the selected obj, I should be able to just use ng-model. However, in this situation, nothing happens when I s ...

javascriptangularjs

Techniques for capturing Django's output from an Ajax request

I've been trying to utilize Ajax for converting my form data to JSON and sending it to my Django view. However, I'm encountering an issue where after successful processing in the view, I am returning a template response with some context data tha ...

javascriptpythondjangoajax

The D3 path is generating an unexpected output of 0px by 0px, causing the map not to display properly. I am currently unsure how to adjust the projection to

I am currently working on creating a world map using D3. I obtained the JSON file from the following link: https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json Below is the code snippet I'm using: // Defining SVG dimensio ...

javascriptjsond3.js