Creating a Scroll Bar with HTML and CSS

Question

Creating a Scroll Bar with HTML and CSS

Recently, I've been working on creating a slider using HTML and CSS, but I've encountered an issue where the second slide displays the third image. Additionally, whenever I click on the third slide, it quickly jumps to the end of the slider. Despite trying various methods, including experimenting with lists, I believe this current approach is the most effective. I would greatly appreciate any advice or assistance in resolving this issue and achieving a functional slider. Thank you.

https://i.sstatic.net/IEXZA.png

On a side note, I have not completed the slider yet and am also considering implementing an auto-slider functionality using JavaScript.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400&display=swap');
img {
  width: 800px;
  height: 500px;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5fff5;
}

.slider {
  width: 800px;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.slides {
  width: 500%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 20%;
  transition: 2s;
}

.slide img {
  width: 800px;
  height: 500px;
}

.navigation-manual {
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn {
  border: 2px solid #e6ffe6;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}
...

javascript html css

Answer 1

Answer №1

There were some errors in the calculations.

You could try implementing something similar to this:

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400&display=swap");
img {
  width: 800px;
  height: 500px;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5fff5;
}

.slider {
  width: 800px;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.slides {
  width: 800%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 100%;
  transition: 2s;
}

.slide img {
  width: 800px;
  height: 500px;
}

.navigation-manual {
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn {
  border: 2px solid #e6ffe6;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}

.manual-btn:hover {
  background: #e6ffe6;
}

#radio1:checked~.first {
  margin-left: 0;
}

#radio2:checked~.first {
  margin-left: -12.5%;
}
...

<body>
  <div class="slider">
    <div class="slides">
      <input type="radio" name="radio-btn" id="radio1">
      <input type="radio" name="radio-btn" id="radio2">
      ...
      </div>

      <div class="navigation-auto">
        <div class="auto-btn1"></div>
        <div class="auto-btn2"></div>
        ...
      </div>

    </div>
    <div class="navigation-manual">
      <label for="radio1" class="manual-btn"></label>
      <label for="radio2" class="manual-btn"></label>
      ...
    </div>
  </div>
</body>

Answer 2

There were some errors in the calculations.

You could try implementing something similar to this:

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400&display=swap");
img {
  width: 800px;
  height: 500px;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5fff5;
}

.slider {
  width: 800px;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.slides {
  width: 800%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 100%;
  transition: 2s;
}

.slide img {
  width: 800px;
  height: 500px;
}

.navigation-manual {
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn {
  border: 2px solid #e6ffe6;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}

.manual-btn:hover {
  background: #e6ffe6;
}

#radio1:checked~.first {
  margin-left: 0;
}

#radio2:checked~.first {
  margin-left: -12.5%;
}
...

<body>
  <div class="slider">
    <div class="slides">
      <input type="radio" name="radio-btn" id="radio1">
      <input type="radio" name="radio-btn" id="radio2">
      ...
      </div>

      <div class="navigation-auto">
        <div class="auto-btn1"></div>
        <div class="auto-btn2"></div>
        ...
      </div>

    </div>
    <div class="navigation-manual">
      <label for="radio1" class="manual-btn"></label>
      <label for="radio2" class="manual-btn"></label>
      ...
    </div>
  </div>
</body>

Answer 3

Answer №2

This code snippet is set up to function as expected.

View the CodePen demo here


        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400&display=swap');
img {
  width: 800px;
  height: 500px;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5fff5;
}

.slider {
  width: 800px;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.slides {
  width: 500%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none; 
}

.slides input#radio1{left: 0px; }
.slides input#radio2{left: 20px; }
.slides input#radio3{left: 40px; }
.slides input#radio4{left: 60px; }
.slides input#radio5{left: 80px; }
.slides input#radio6{left: 100px; }
.slides input#radio7{left: 120px; }
.slides input#radio8{left: 140px; }

.slide {
  width: 20%;
  transition: 2s;
}

.slides_wrap {
  transition: 2s; display: flex;
}

.slide img {
  width: 800px;
  height: 500px;
}

.navigation-manual {
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn {
  border: 2px solid #e6ffe6;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}

.manual-btn:hover {
  background: #e6ffe6;
}

#radio1:checked~.first {
  margin-left: 0;
}
...

HTML

<body>
    ...
</body>

Explanation-

The code now includes a container for all the slides for better organization.
Rather than individually moving each slide, the entire container shifts when clicked for smoother functionality.
Clicking on navigation buttons will now effectively shift the outer container.

Answer 4

This code snippet is set up to function as expected.

View the CodePen demo here


        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400&display=swap');
img {
  width: 800px;
  height: 500px;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5fff5;
}

.slider {
  width: 800px;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.slides {
  width: 500%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none; 
}

.slides input#radio1{left: 0px; }
.slides input#radio2{left: 20px; }
.slides input#radio3{left: 40px; }
.slides input#radio4{left: 60px; }
.slides input#radio5{left: 80px; }
.slides input#radio6{left: 100px; }
.slides input#radio7{left: 120px; }
.slides input#radio8{left: 140px; }

.slide {
  width: 20%;
  transition: 2s;
}

.slides_wrap {
  transition: 2s; display: flex;
}

.slide img {
  width: 800px;
  height: 500px;
}

.navigation-manual {
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn {
  border: 2px solid #e6ffe6;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}

.manual-btn:hover {
  background: #e6ffe6;
}

#radio1:checked~.first {
  margin-left: 0;
}
...

HTML

<body>
    ...
</body>

Explanation-

The code now includes a container for all the slides for better organization.
Rather than individually moving each slide, the entire container shifts when clicked for smoother functionality.
Clicking on navigation buttons will now effectively shift the outer container.

Answer 5

Answer №3

All of your Image divs currently share the same class.

To improve this, try renaming the divs with unique classes like 'first', 'second', etc. Then adjust the margins as multiples of the image width, as illustrated in the example shown.

Keep in mind that this setup may not work well on smaller screens. To make it more responsive, consider using percentages for image size and related offsets.

Great effort overall!

Answer 6

All of your Image divs currently share the same class.

To improve this, try renaming the divs with unique classes like 'first', 'second', etc. Then adjust the margins as multiples of the image width, as illustrated in the example shown.

Keep in mind that this setup may not work well on smaller screens. To make it more responsive, consider using percentages for image size and related offsets.

Great effort overall!

Creating a Scroll Bar with HTML and CSS

Answer №1

Answer №2

Answer №3

Similar questions

Chrome reload causing page to automatically scroll to bottom on my website

Is a Singleton really necessary for my situation?

In Visual Studio 2022, curly braces are now positioned on the same line for JavaScript code

Is it possible that only one number is printed when document.getElementById("demo").innerHTML = Math.ceil((Math.random()*10)-1); is executed?

Adjust the image's background color within an SVG file

What is the best way to retrieve properties from a different module in JavaScript?

Understanding the Functioning of a Digital Analog Clock Using JavaScript

Running a node.js project on the client side without using npm for deployment

My website gets all wonky when I try to resize the browser

Developing a dynamic table using data retrieved from an API within a JS React Bootstrap framework

Utilize the ng-click feature for swiping interactions in Ionic v1

Triggering an automatic pop-up window using JavaScript based on a PHP condition

The function does not modify the content of an element in Internet Explorer versions 10 to 11

What steps can I take to ensure my CSS selector for the element is functioning properly?

Python code allowing users to navigate back to the previous page while retaining elements

Increasing the identifier of duplicated input fields using jQuery

Center the background image at the halfway mark on the screen

Customize stroke widths for each individual SVG item

What is the best way to change the first letter of a string to uppercase in JavaScript?

Is it safe to remove the `async` keyword if there are no `await` statements in use