Step-by-step guide on building an endless reviews carousel

Can someone assist me in creating an endless reviews carousel? I've been grappling with it for the past two days. Just so you know, I'm a newcomer to web development and my code may not be the cleanest.

Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
...

CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
...

Javascript:

var rightButton = document.querySelector('.btn-right');
var leftButton = document.querySelector('.btn-left');
...

I am aiming to develop a carousel for reviews that seamlessly loops when reaching either end. Your guidance on achieving this behavior is greatly appreciated. Thank you for your assistance.

javascripthtmlcss

Answer №1

After checking if the current position is at -2 or 2, representing the first or last slide, the script cycles back to the beginning or end accordingly. 

var rightButton = document.querySelector('.btn-right');
var leftButton = document.querySelector('.btn-left');

let transform = 0;
let current = 0;

rightButton.addEventListener('click', function() {
    transform = transform - 720;
    current++;
    if (current > 2) {
      current = -2;
      transform = 720 * 2;
    }
    document.querySelector('.content').style.transform = 'translateX(' + transform + 'px)';
});

leftButton.addEventListener('click', function() {
    transform = transform + 720;
    current--;
    if (current < -2) {
      current = 2;
      transform = -720 * 2;
    }
    document.querySelector('.content').style.transform = 'translateX(' + transform + 'px)';
});

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 15px;
}

img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 15px;
    margin-top: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="big-box">
        <div class="heading">
            <h1>Our Reviews</h1>
        </div>
        
        <div class="container">
            <div class="content">
                ...
            </div>
            
            <div class="btn-box">
                <button class="btn btn-left"><ion-icon name="arrow-back-outline"></ion-icon></button>
                <button class="btn btn-right"><ion-icon name="arrow-forward-outline"></ion-icon></button>
            </div>
        </div>
    </div>
    
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    
    <script src="script.js"></script>
</body>
</html>

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

Show two columns horizontally using JavaScript

Hey, I'm working on a project where I need to display data from an array in an HTML output table. However, I'm facing an issue with displaying the table on the same page after clicking the submit button. Using document.write redirects me to anoth ...

javascriptarrayshtml

Encountering challenges with managing global variables in my Node.js application

I am facing a problem with global variables in my NodeJs application. The project involves webservices created using the express module. When a client accesses the service, a json object is sent in the request body. I extract all properties from the reques ...

javascriptjsonnode.jsexpress

Error in HTML: Text variable is not displaying the number value

Currently, I am facing a challenge with my code. I have a variable named "Timer" that I want to increment by one and then display the number. However, I am unable to see the "Test Successful!" message displayed on the screen. Surprisingly, there are no e ...

javascriptvisual-studio-code

Retrieve Files with Angular Framework

I'm looking to implement a file download or view button using Angular without making a call to the backend. The file is static and the same for all users, so I want to avoid unnecessary server requests. Many solutions involve using the "download" att ...

javascriptangularjsdjangohtml

When using express to serve a static file with sendfile, the route specified is considered as the relative directory rather than its actual location directory

I'm facing an issue with a route in Express router.get('projects/fest', function(req, res, next){ res.sendfile('fest.html', {root: './public'}); }); When accessing localhost:3000/projects/fest, the HTML file is disp ...

javascriptnode.jsexpress

Using PHP to send asynchronous requests to the server can greatly enhance

I have almost completed my project, but I am facing an issue with reading the data sent to the server. function main() { jQ(document).on("keyup", "form input", function () { var data = new FormData(); var value = jQ(this).val(); da ...

javascriptphpjqueryajax

The div element is not resizing properly when the phone is in landscape mode

I have set a background photo to take up 100% of the height. However, when I view the site on a mobile phone in landscape mode using Chrome or Firefox, the background image does not fill the entire space. In desktop and portrait mobile modes, everything ...

htmlcssresponsive-design

issues with the game loop functionality

Help needed: How can I eliminate the delay in moving my player? I tried implementing a game loop after reading some online articles like "Is it possible to make JQuery keydown respond faster?" However, I keep encountering an error in my console stating Unc ...

javascriptjquery

Kendo UI: Harnessing the power of one data source across two dynamic widgets

UPDATE: I have provided a link to reproduce the issue here RELATED: A similar issue with Kendo UI Map was discussed in another one of my questions, which might offer some insights to help resolve this one! This question has both a failing and a working ve ...

javascriptangularjskendo-uikendo-datasourcekendo-map

Arranging json array according to alphabetical sections in angularjs 2

In the example below, I am working with JSON data that needs to be formatted and placed in a box according to specific criteria. The data sorted in A-B should go to a particular section, and it needs to be dynamic. Despite numerous attempts, I have not bee ...

javascripthtmljsoncssangular2-routing

Reactjs rendering problem related to webpack

Greetings! I am new to using react js and decided to create a quiz application. However, I encountered an error when the render function was called. Below is my webpack.config file: module.exports = { entry: { app: './src/index.js' }, ...

javascriptreactjscomponentswebpack

Analyze XML elements and retrieve their associated content

Analyzed below are the contents extracted from the processed XML file: <dblp> <incollection> ...

pythonhtmlxmlpython-3.x

"Exploring the use of conditional rendering in React to dynamically hide and show components based

I am currently immersed in the world of React/Redux, focusing on an e-commerce project. This particular application offers two payment methods: cash and card payments. On the product display page, both payment icons are visible. However, I am seeking a sol ...

javascriptreactjsredux

"Table layout set to fixed is failing to function as intended

Can someone help me figure out why the CSS table in the code below is not hiding the content that exceeds the table height of 200px? Instead, the table is expanding vertically. <div style='display:table; border:1px solid blue; width:200px; table ...

htmlcss

The styles from the npm package are not being properly applied to the class

After creating my react npm package using webpack, I encountered an issue where the styles from the package were not being applied to classes when installed in my react project. I used style-loader in my webpack configuration, but kept getting errors sayin ...

javascriptreactjsnext.jswebpack-4

Free up Object Three.js

I've been working on a project that utilizes webGl and Three.js. The main issue I'm facing is related to memory deallocation. As the game progresses, a large number of objects are created, leading to excessive memory allocation. Despite trying v ...

javascriptmemory-managementthree.jswebgl

Steps to activate a particular Bootstrap tab upon clicking a hyperlink

Trying to implement a Bootstrap tab panel in the following manner: <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href ...

javascripthtmltwitter-bootstrapbootstrap-4tabs

What is the best way to eliminate the lower margin in the UI-Boostrap Angular Tab directive?

The ui.bootstrap.tabs directive, which can be found here, seems to have a default margin before displaying its content. https://i.stack.imgur.com/NECGA.png Here is the HTML snippet: <uib-tabset active="activeJustified" justified="false" id="tabSet" s ...

htmlcssangularjsangular-ui-bootstrap

Using Vue: Triggering .focus() on a button click

My journey with vue.js programming started just yesterday, and I'm facing a challenge in setting the focus on a textbox without using the conventional JavaScript method of document.getElementById('myTextBox').focus(). The scenario is that i ...

javascriptvue.jsvuejs2setfocus

Steps for adding a navbar that slides horizontally and overlaps other links on a webpage

I am attempting to design a sliding navigation menu using JQuery. The concept involves having multiple main sections, each with several subsections. When a user hovers over a section, the subsections will expand horizontally. If another section is current ...

jqueryhtmlcssnavbar