Utilizing CSS Scroll-snap for Seamless Navigation

Attempting to create a basic carousel using scroll-snap, but encountering an issue where the carousel is randomly scrolling on load instead of starting with the first picture. See code snippet below. Any ideas on resolving this?

    
        .carousel {
            display: flex;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
            width: 80%;
        } 
        .carousel-img{
            scroll-snap-align: start;
            width: 200px;
        }
      
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>

    </style>
    <body>
        
    <div class="carousel">
        <img class="carousel-img" src="https://picsum.photos/300" alt="">
        <img class="carousel-img" src="https://picsum.photos/301" alt="">
        <img class="carousel-img" src="https://picsum.photos/302" alt="">
        <img class="carousel-img" src="https://picsum.photos/303" alt="">
        <img class="carousel-img" src="https://picsum.photos/304" alt="">
        <img class="carousel-img" src="https://picsum.photos/305" alt="">
        <img class="carousel-img" src="https://picsum.photos/306" alt="">
        <img class="carousel-img" src="https://picsum.photos/307" alt="">
        <img class="carousel-img" src="https://picsum.photos/308" alt="">
        <img class="carousel-img" src="https://picsum.photos/309" alt="">
        <img class="carousel-img" src="https://picsum.photos/310" alt="">
        <img class="carousel-img" src="https://picsum.photos/311" alt="">
        <img class="carousel-img" src="https://picsum.photos/312" alt="">
        <img class="carousel-img" src="https://picsum.photos/313" alt="">
        <img class="carousel-img" src="https://picsum.photos/314" alt="">
        <img class="carousel-img" src="https://picsum.photos/315" alt="">
        <img class="carousel-img" src="https://picsum.photos/316" alt="">
    </div>
    
    </body>
    </html>

htmlcss

Answer №1

The issue at hand is that the images are causing the scrollbar to shift as they load.
Furthermore, not all images load at the same speed due to differences in file size, adding an element of unpredictability.

To resolve this, a simple solution would involve wrapping the images in another <div>, matching the width of the images, and applying the scroll-snap-align property.

An example of a single slide would be:

<div class="carousel-slide">
    <img class="carousel-img" src="https://picsum.photos/308" alt="">
</div>

In your .carousel-img{} CSS, remove the scroll-snap-align:

.carousel-img {
  width: 200px;
}

Add the following styles for the new <div>:

.carousel-slide {
  scroll-snap-align: start;
  width: 200px;
}

Complete example:

.carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  width: 80%;
}

.carousel-img {
  width: 200px;
}

.carousel-slide {
  scroll-snap-align: start;
  width: 200px;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <style>

  </style>

  <body>

    <div class="carousel">
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/300" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/301" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/302" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/303" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/304" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/305" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/306" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/307" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/308" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/309" alt="">
      </div>
    </div>

  </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

I wish to substitute a form field with a different one once the value of another field matches a specific condition

The issue I'm facing is that the field disappears once "US" is chosen and does not revert back to the options when another choice is made. teacher_signup.html {% block content %} <h2>Sign Up As Teacher</h2> <form method="post> ...

javascriptjqueryhtmldjangoforms

What are some ways to style CSS for links, such as a login button?

Check out this website You may have noticed the login button with a stylish black background created using CSS. How can I achieve a similar look? Some buttons are PHP statements while others are simple play links. I also need the register, lost password, ...

phphtmlcsswordpresshyperlink

Preventing automatic recompilation in Angular when there are changes in the assets folder

I am facing an issue while attempting to download a file generated from a Spring Boot application in the assets folder of an Angular project. Every time I call the Spring API from Angular services, the Angular CLI recompiles the project after creating the ...

htmlangularspring-bootlivereload

Encountered a problem while trying to update a list item in Vue.js

Greetings Everyone, I've successfully implemented a basic CRUD functionality in VueJS. The values are being inserted into a list, from which I can read and delete them. However, I'm facing an issue with updating any value. When I try to ...

htmlvue.js

Applying custom CSS designs to images using Thymeleaf

Currently working on a web application using Spring MVC and Thymeleaf for templating. I'm struggling to figure out how to apply rules to an image, especially when using an external CSS file. I have tested code that works: page.html <a class="nav ...

htmlcsstwitter-bootstrapspring-mvcthymeleaf

HTML input field template

Is there a way to limit the HTML text box to only allow specific patterns such as: A1+A2*A3 It must consist of alphanumeric characters (A1 to A5) 2) It should be able to recognize and accept arithmetic operators in the specified format above. I am util ...

htmlangularjs

Can the TEXT from a <select> be passed as the value of a hidden <input> element?

<form method="POST" action="question-function.php"> <label>Choose Category</label> <select name="catid" id="catid" class="form-control"> <?php $sel3 = mysqli_query($ ...

phphtml

Managing different user types in HTML5

I'm in the process of creating an application that interacts with a service and performs various tasks based on user permissions. After doing some research, I discovered that Kinvey offers a solution that is similar to what I need, but I'm not c ...

phpandroidioshtmlcordova

The appearance of HTML in JSP and CSS output in a Spring application is different from the local environment

For my web application's landing page, I created the design using HTML and CSS. Typically, I first design it on scratchpad.io before implementing it into my STS IDE. However, when I run the application, the output of the page appears different from th ...

htmlcssjspformatting

Using CSS files that are not properly imported into React components

Currently, I am utilizing multiple CSS files for a specific purpose. The issue I am facing is that when I apply styles to one component in a CSS file, it inadvertently affects other components as well, not just the intended one. I believe the root of this ...

cssreactjsreact-routercreate-react-app

Steps for altering the primary color in PrimeNG__Changing the primary color

What is the most effective way to modify the default primary color for primeNG (saga-blue theme)? Altering --primary-color does not have the desired effect, as elements in node_modules/..../theme.css are styled using the main color hex rather than '-- ...

cssangularprimeng

Using the <a> tag within a PHP script

Within my PHP code, I utilized the tag. However, when testing the code, the output appeared as a link but was not clickable. $data1 = mysql_query("SELECT * FROM image_upload INNER JOIN user_table ON image_upload.user_id=user_table.user_id WHERE flag=1 ORD ...

phphtml

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

CSS: The button appears to be slightly lower than the label

For more information, check out this GitHub link Here is the HTML code snippet: <div class="col-md-12"> <div class="col-md-2"> Processing </div> <div class="col-md-4"> <button class="btn btn-primary">Hello</ ...

csstwitter-bootstrap

Achieving Consistent Aspect Ratios with Images in Flexbox Grid

I'm attempting to utilize flexbox for arranging elements in the layout shown below: -- ------ -- | | | | |--| |--| | | | | -- ------ -- Each corner 'box' contains an image with a square aspect ratio of 1:1. The center ...

htmlcssflexbox

I am experiencing an issue with mydaterangepicker and primeng where it is not displaying properly in the table header. Can anyone assist me with this

I am attempting to integrate mydaterangepicker () with primeng turbotable (since primeng calendar does not meet the requirements), but I am having trouble with its display. Could you please assist me with some CSS code or suggest an alternative solution? ...

cssangulartypescriptprimeng

What is the best method for organizing data in rows and columns?

I attempted to use my map function to iterate over the data and display it, but I struggled to format it into rows and columns. The requirement is for 5 fixed columns with dynamically changing rows, making array indexing impractical. Here is the code snip ...

javascripthtmlcssreactjstailwind-css

What distinguishes between using ul#test and #test ul in CSS?

Could someone help clarify the distinction between these two types of CSS declarations: ul#test { } #test ul { } Despite my searching, I am unable to pinpoint the difference, but they exhibit different behaviors when implemented on a test page. To me, i ...

csscss-selectors

What is the best way to transform this into an HTML readable code?

While browsing through a template, I came across this code and I'm unsure of how to get it functioning. I've tried removing the comments, but unfortunately it doesn't seem to be working as expected. li.dropdown.navbar-cart ...

javascriptphpjqueryhtmlcss

The issue I am facing currently revolves around the absence of images on

I recently uploaded a captivating HTML page for my website's captive portal. Although the redirection to the designated page is working perfectly, I am facing an issue with the images included in the HTML page. Even though I went ahead and uploaded th ...

htmlpfsensecaptiveportal