Spots on a spinning wheel

I created a simple carousel design:

.index {
  background-color: var(--color-blue);
}

.container {
  display: flex;
  overflow: auto;
  outline: 10px solid black;
  flex: none;
}

.container.x {
  width: 100%;
  flex-flow: row nowrap;
}

.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.carousel-card {
  width: 100vw;
  height: 30rem;
}

h1 {
  color: blue;
  
}

h2 {
  color: red;
}

h3 {
  color: green;
}

h1, h2, h3 {
  font-size: 10rem
}
<div class="index">
        <div class="container x mandatory-scroll-snapping" dir="ltr">
          <div class="carousel-card">
                    <h1>ONE<h1>
          </div>
                  <div class="carousel-card">
                    <h2>TWO</h2>
          </div>
                  <div class="carousel-card">
                    <h3>THREE</h3>
          </div>
        </div>
    </div>

I want to maintain the horizontal scrolling for mobile devices, but I want to include dots and highlight the active one within a separate div.

I prefer not to use bootstrap, jquery, or any other library (otherwise I would have implemented it already).

I've been searching for a solution without success:

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Your assistance is greatly appreciated! :)

htmlcsscarousel

Answer №1

An alternative approach is to anchor directly to the divs within the carousel, eliminating the need for a specific target.

.index {
  background-color: var(--color-blue);
}

.container {
  display: flex;
  overflow: auto;
  outline: 10px solid black;
  flex: none;
}

.container.x {
  width: 100%;
  flex-flow: row nowrap;
}

.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.carousel-card {
  width: 100vw;
  height: 30rem;
}

h1 {
  color: blue;
}

h2 {
  color: red;
}

h3 {
  color: green;
}

h1, h2, h3 {
  font-size: 10rem
}
<div class="index">
  <div class="container x mandatory-scroll-snapping" dir="ltr">
          <div id="cardOne" class="carousel-card">
                    <h1>ONE</h1>
          </div>
                  <div id="cardTwo" class="carousel-card">
                    <h2>TWO</h2>
          </div>
                  <div id="cardThree" class="carousel-card">
                    <h3>THREE</h3>
          </div>
  </div>
</div>

<ul>
<li><a href="#cardOne">One</a></li>
<li><a href="#cardTwo">Two</a></li>
<li><a href="#cardThree">Three</a></li>
</ul>

Answer №2

I have taken it a step further by incorporating dots (using Font Awesome) with an active state. Additionally, I have eliminated the scrollbar and enabled smooth scrolling by setting scroll-behavior to smooth. Your scroll-snap functionality is working perfectly as well.

If you feel that more adjustments are necessary, please do let me know.

let activeDots = document.querySelectorAll('.dot');

activeDots.forEach(activeDot => {
  activeDot.addEventListener('click', e => {
    document.querySelector('.dot.active').classList.remove('active');
    e.target.classList.add('active');
  });
});
::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

ul {
  list-style: none;
}

.dots-container {
  display: flex;
  justify-content: center;
}

ul.dots {
  display: flex;
}

.dots li+li {
  margin-left: .5rem;
}

.active {
  color: yellow;
}

.index {
  background-color: var(--color-blue);
  height: 85vh;
}

.container {
  display: flex;
  overflow: auto;
  flex: none;
}

.container.x {
  width: 100%;
  flex-flow: row nowrap;
}

.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.container>div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.carousel-card {
  width: 100vw;
  height: 23rem;
}

h1 {
  color: blue;
}

h2 {
  color: red;
}

h3 {
  color: green;
}

h1,
h2,
h3 {
  font-size: 10rem
}

.dot::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.dot::before {
  font: var(--fa-font-solid);
  content: "\f111";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

<div class="index">
  <div class="container x mandatory-scroll-snapping" dir="ltr">
    <div id="cardOne" class="carousel-card">
      <h1>ONE</h1>
    </div>
    <div id="cardTwo" class="carousel-card">
      <h2>TWO</h2>
    </div>
    <div id="cardThree" class="carousel-card">
      <h3>THREE</h3>
    </div>
  </div>
  <div class="dots-container">
    <ul class="dots">
      <li>
        <a class="dot active" href="#cardOne"></a>
      </li>
      <li>
        <a class="dot" href="#cardTwo"></a>
      </li>
      <li>
        <a class="dot" href="#cardThree"></a>
      </li>
    </ul>
  </div>
</div>

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

Changing HTML dynamically does not trigger the ng-click event within ng-bind-html

I have developed a custom directive that can display messages along with rendering HTML content that may contain Angular attributes like buttons, anchor tags with ng-click attribute, and more. index.html: <ir-error-panel status="status"></ir-err ...

javascriptjqueryhtmlangularjs

Guide to transforming plain text into HTML format using Angular 4

In my Angular application, I am facing the task of adding a value to an array where the value itself needs to be in HTML format. This means that when the value is displayed, it should render as HTML text. For instance, if someone hovers over the text, I ...

htmlangulartooltip

What is the best way to animate an element to slide down when it is hidden with

I'm working on an html tag called "loginBox" (<loginBox> ... </loginBox>) that is initially hidden with display:none. When a user selects an option, I want it to smoothly slide down instead of just appearing and disappearing. How can I ach ...

javascriptjqueryhtmlcss

Abstract forms on the canvas are dancing in a strange and unusual rhythm

As a beginner in web design, I've made progress but still have questions. Can someone help explain this to me? Here is how a specific section on my website is set up: https://i.sstatic.net/8ntpR.png I'm working on splitting the screen with 40% ...

htmlcss

Tips for building and implementing Angular URL Parameters for URLs in the form: "component/#/?id=..."

I am currently facing a situation where I have an application with an existing user base. I am looking to avoid disrupting their current links for a smoother transition. However, the previous links are in this format: (server)/viewer/#/?id=12. Please see t ...

javascripthtmlangulartypescript

When hovering, apply style 1 to all elements with the same id, and style 2 to the hovered element

I'm working with some user-generated divs that I want to dynamically highlight when hovered over, while simultaneously blurring the other divs. My challenge is figuring out how to change the style of the hovered div separately from all the others. Th ...

javascriptcss

Invoke a function to retrieve HTML content from a controller method

public ActionResult MyActionMethod(MyModel model) { //some code string myVar= ActionMethod2(model).toString(); //use myVar Method3(myVar, otherVar); } public ActionResult ActionMethod2()(MyModel model) { return View(model); } private ...

htmlasp.net-mvccontrollerrenderaction

List with Columns for Organization

I am not seeking advice on how to use columns in lists, but rather on aligning the columns on my website. Below is the code I have: <ol class="threecolumns"> <li>Item 1</li> <li>Item 2</li> <li>Item 3< ...

htmlcss

Interactive Text Transformation on Mouse Over

My goal is to create a sleek and clean Index page featuring a simple white background with text centered in the middle. The initial text will be: USEStudio Upon hovering the mouse, the text will transform into: ...

jqueryhtmlcss

Modifying HTML elements with JavaScript - a practical guide

I'm trying to dynamically add the variable x to an existing HTML tag. The goal is to update the image tag <img id="Img" src="IMG/.jpg"/> by appending the variable x at the end of its id and source: <script> var images ...

javascripthtml

Problem encountered during the transfer of JSON data from PHP to JavaScript

Currently, I am working on a PHP file that extracts data from a database to display it on a chart using the Chart.js library. The chart is functioning properly, but I am facing an issue where I need to use the json_encode() function to pass the array value ...

javascriptphphtmljsonajax

Numerous Selection Boxes

I came across this code snippet on the web. How can I insert the output into an email? Usually, I follow this format: $name = $_POST['name']; $email_body = "$name"; I want to incorporate the output of this code into my $email_body variable. Is ...

phphtmlformsemailcheckbox

Seeking assistance in the development of a visual depiction of device orientation through JS

My goal is to visually represent the device orientation values alpha, beta, and gamma by creating a series of "bars" for each value. Currently, I have managed to display only the values in plain text using innerHTML. However, I envision these bars moving i ...

javascriptcss

React Nested Grid with Material-UI

https://i.stack.imgur.com/toxDA.jpg I am striving to replicate the layout demonstrated in the image below So far, I have the following code snippet: <Grid container justify=“space-between”> <Grid container item> <Grid ite ...

cssreactjsgridmui

Arrange image, icon, and title in Bootstrap navigation bar

index.html <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> </ul> <span class="navbar-text" s> <ul class="navbar-nav mr-auto ...

htmlcssbootstrap-4

Tips for aligning the title to the left of text within a Bootstrap 4 card component

I have a situation where I need to adjust the layout of a card item in Bootstrap 4. Specifically, I want to move the title to the left of the text for screens that are not mobile. Is there a way to achieve this? Thank you! <div class="card flex-row fle ...

cssbootstrap-4

Issue encountered with jQuery nested hover events and the removeClass() function being triggered on mouseleave

I have a nested list structure that I am working with: <ul class="menu-wrapper"> <li> <a href="#">Menu item</a> <ul class="sub-menu"> <li> < ...

htmljquerycsshovernested-lists

Style the nth child of a particular type in CSS with a unique color scheme

Is there a way to select the nth child of type and apply different colors without assigning IDs because they are dynamically generated in a loop from a template engine? I found some useful information on this topic here: https://www.w3schools.com/cssref/ ...

htmlcss

Having trouble displaying the input upon clicking the icon

Currently, I am honing my skills in vanilla JavaScript by working on a website project. In this project, I have implemented a feature where clicking on a fingerprint icon triggers an input field to appear for the user to enter their password. The code snip ...

javascripthtmlcss

Learn how to create a responsive flickr embedded video with Bootstrap!

I'm struggling to make the embedded video responsive. I attempted the solution mentioned in a Stack Overflow post but it didn't work for me. The video's width remains the same and doesn't scale down properly, appearing out of bounds on ...

htmlcsstwitter-bootstrapvideoflickr