Prevent further scrolling on the slider by utilizing a link with the target ID in pure CSS

I've created a CSS slider, but I'm facing an issue where clicking the bullet and arrow navigation scrolls to the top of the slider from the extra space. Is there a way to prevent this behavior using only HTML and CSS?

I've tried using a href="#s3/" and a href="#s3!", but it didn't work as expected.

I'm looking for a pure HTML and CSS solution since we are not using any scripting CMS. Thank you!

.wrapper {
  overflow:scroll;
height:700px;
}

/* For visual purpose only */
.extra-space {
  width: 100%;
  height: 300px;
  background: red;
   line-height: 300px;
  text-align: center;
 
}

/*slider*/

.CSSgal {
  position: relative;
  overflow: hidden;
  /* Or set a fixed height */
}

/* SLIDER */

.CSSgal .slider {
  height: 100%;
  white-space: nowrap;
  font-size: 0;
  transition: 0.8s;
}

/* SLIDES */

.CSSgal .slider>* {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  height: 100%;
  width: 100%;
  background: none 50% no-repeat;
  background-size: cover;
}

/* PREV/NEXT, CONTAINERS & ANCHORS */

.CSSgal .prevNext {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 100%;
  height: 0;
}

.CSSgal .prevNext>div+div {
  visibility: hidden;
}

.CSSgal .prevNext a {
...
...
</div>

htmlcsshyperlink

Answer №1

I was able to resolve this issue by including s{display: none;} which hides the id.

/*** here is the solution ***/
s{
  display: none;
}

.wrapper {
  overflow:scroll;
height:700px;
}
/* Additional space for visual purposes */
.extra-space {
  width: 100%;
  height: 300px;
  background: red;
   line-height: 300px;
  text-align: center;
 
}

/*slider*/

.CSSgal {
  position: relative;
  overflow: hidden;
}

/* SLIDER */

.CSSgal .slider {
  height: 100%;
  white-space: nowrap;
  font-size: 0;
  transition: 0.8s;
}

/* SLIDES */

.CSSgal .slider>* {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  height: 100%;
  width: 100%;
  background: none 50% no-repeat;
  background-size: cover;
}

/* PREV/NEXT, CONTAINERS & ANCHORS */

.CSSgal .prevNext {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 100%;
  height: 0;
}

/* Setting visibility of Previous/Next containers */
.CSSgal .prevNext>div+div {
  visibility: hidden;
}

.CSSgal .prevNext a {
  text-align: center;
  opacity: 0.7;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 0;
  position: absolute;
  width: 30px;
  height: 30px;
  display: inline-block;
  padding: 3px;
}

/* Defining styles for left and right navigation buttons */
.CSSgal .prevNext .right {
  right: 30px;
  left: auto;
  position: absolute;
  top: 50%;
  ...

<div class="wrapper">
  <section class="extra-space">
  <h1>Extra space</h1>
  </section>
  <section class="mb-4">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 p-0">
          <div class="CSSgal">

            <!-- Ensure that targets are not wrapped in parent elements -->
            <s id="s1"></s>
            <s id="s2"></s>
            <s id="s3"></s>

            <div class="slider">
              <div>
                <a href="/en-ae/brands/troop-london/">
                  <img src="https://dummyimage.com/600x400/000/fff">
                </a>
              </div>
              <div>
                <img src="https://dummyimage.com/600x400/000/fff">
              </div>
              <div>
                <img src="https://dummyimage.com/600x400/000/fff">
              </div>
            </div>

            <div class="prevNext">
              <div>
                <a class="left" href="#s3"></a>
                <a class="right" href="#s2"></a>
              </div>
              <div>
                <a class="left" href="#s1"></a>
                <a class="right" href="#s3"></a>
              </div>
              <div>
                <a class="left" href="#s2"></a>
                <a class="right" href="#s1"></a>
              </div>
            </div>

            <div class="bullets">
              <a href="#s1"><span>1</span></a>
              <a href="#s2"><span>2</span></a>
              <a href="#s3"><span>3</span></a>
            </div>

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

Issue with array merging/inserting feature not functioning as expected

Here are two arrays that I have: First Array: "workingHours": [ { "opening": "09:30", "closing": "13:30", "dayName": "sunday" }, { ...

phphtmlarraysjsonloops

How can I align Javascript output vertically in the middle?

I am currently facing an issue with a JavaScript clock displaying in a narrow frame: <!DOCTYPE html> <HTML> <HEAD> <TITLE>Untitled</TITLE> <SCRIPT> function checkTime(i) { if (i < 10) { ...

javascripthtmlcssvertical-alignment

Tips for aligning inline elements in the center of a webpage

My goal is to center the title in the middle of the page, taking into account its alignment with the search bar. However, I want it to be centered independently and not affected by the search bar's position. Is there a way to achieve this? To better ...

htmlcss

What is the best way to eliminate line-height from the top of text?

I have a design where an image is floated to the left next to text with a line-height of 2. How can I make sure the top of the image aligns perfectly with the top of the text? Changing the line-height to reduce the space between text and image is not fe ...

htmlcssfontstext-alignment

What is the most effective way to transfer an array from one PHP file to a different JavaScript file?

Utilizing AJAX to send a request to another php page and retrieve the result of a query, I originally used xmlhttprequest to pass the php logic along with the query information. However, I wanted to separate the presentation logic from the actual code logi ...

javascriptphphtmljsonajax

Having trouble with rendering components in React and Bootstrap?

Attempting to display basic Bootstrap components using React. This corresponds to the index.html file: <!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="j ...

javascripthtmltwitter-bootstrapreactjs

Raising double-bracket PHP arrays to SQL level

Take a look at this visual representation of my form structure. <div> <input name="address[1][name]" type="text"> <input name="address[1][street]" type="text"> <input name="address[1][city]" type="text"> <input name="address[1][ ...

phphtmlsqlarraysvariables

How can I prevent media controls from appearing in fullscreen mode on Microsoft Edge using CSS?

My video code allows for switching the video into fullscreen mode using custom controls. Here's how it looks: fullScreenButton.addEventListener("click", function() { if (video.requestFullscreen) { video.videoContainer.r ...

javascriptcss

Adding a layer to an HTML element causes CSS to malfunction

I am encountering an issue with my HTML code. Initially, it looks like this: <div style=" display: grid; grid-template-columns: 200px 200px 200px;"> <button style="width:100%; height:100%" *ngFor="let valu ...

htmlcssangular

Building a responsive HTML5 site optimized for various screen sizes

I'm working on a website design that includes just one <div>. I have managed to make it responsive to different screen resolutions, but when testing it on a laptop, the horizontal and vertical scrollbars are automatically appearing. Does anyone ...

csshtmltwitter-bootstrap

I'm trying to create a horizontal list using ng-repeat but something isn't quite right. Can anyone help me figure out

Feeling a bit lost after staring at this code for what seems like an eternity. I'm trying to create a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here's the HTML snippet: <div class="modal-body"> ...

javascripthtmlcssangularjsangularjs-ng-repeat

The overlay div is not displaying over my main div as intended

Having trouble with my overlay design - I've set up a button that should display an overlay div on top of my main div when clicked, but for some reason it's not appearing. Despite watching tutorials and looking for similar issues, I'm unable ...

javascripthtmlcss

Are you considering using Amazon cloud services for hosting your website?

Can Amazon ECS be used to host a webpage? I attempted to visit my site , but nothing is displaying. With a username and SSH key provided by my boss, I'm unsure of where to place the index.html file in order for it to appear on the web. Any guidance w ...

htmlamazon-ec2

How do you prevent items from shrinking in a flex container when they have more content?

I am facing an issue with a flex container where the items are set in a row. Once it reaches the end of the viewport width, I want it to overflow-x: scroll. However, instead of enabling scrolling, all items shrink when more items are added to fit the scree ...

htmlcssflexbox

Video on YouTube restarts upon hiding and revealing its container div

Is there a way to retain the progress and playback position of a YouTube video embedded within a div on a webpage? Currently, when I hide and then show the div using jQuery/CSS, the video reloads and starts from the beginning. Is there a solution to avoid ...

javascriptjqueryhtmlyoutube

Adjust the height of a div element in the browser based on the content it contains

While I've come across similar questions, I have a query of my own... Is there a way to make the green div fill 100% of the browser window regardless of its content? http://jsbin.com/aculed/1/edit HTML: <div id="container"> & ...

htmlcss

Display an additional dropdown menu after the user has made a selection in the first dropdown

Initially, I must address a concern that has previously been resolved; however, the alternative options available on this platform do not meet my needs. Essentially, I aim to create a concise form with two dropdown menus. The first dropdown menu is always ...

javascriptcsshtmldrop-down-menu

How to write a more advanced Path for Selenium Chrome WebDriver using C#

I am struggling to find the correct path to click on a specific button on my webpage. To help illustrate, I have provided a sample page for testing purposes. All you need to do is download the HTML file and open it in your browser.Code of HTML page What ar ...

c#htmlseleniumpathselenium-chromedriver

Unlimited Rotation with CSS3

I'm attempting to create a spinning image effect that rotates 360 degrees infinitely on hover. However, it seems that the background element I've used to display the image might be causing issues. I'm not sure how else to display the image w ...

htmlcssanimationtransition

What is the best way to transform a rectangular image into a square using CSS?

It's a common misconception that CSS can directly modify images, hence the quotation of "crop." My goal is to take rectangular images and apply CSS to give them a square appearance without altering the image itself. Essentially, I want to transform ...

htmlcssimagecrop