Having trouble with CSS Overflow:hidden not functioning properly on my slider

I have successfully created a 100% width slide using jQuery. However, I am facing an issue where the horizontal overflow is not being hidden. Here are my codes:

HTML,

<div class="slide">
    <ul>
        <li><img src="inc/imj/slide/1.jpg" alt="" /></li>
        <li><img src="inc/imj/slide/2.jpg" alt="" /></li>
        <li><img src="inc/imj/slide/3.jpg" alt="" /></li>
    </ul>
    <div class="reff">
        <span class="before">
            <img src="inc/imj/before.jpg" alt="" />
        </span>
        <span class="after">
            <img src="inc/imj/after.jpg" alt="" />
        </span>
    </div>
</div>

CSS,

.slide{
    border-bottom:1px solid orange;
    height:400px;
    width:100%;
    float:left;
    width:140%;
    overflow:hidden;
}

.slide ul li img{width:1400px;height:400px;}
.slide ul li{display:inline-block;list-style-type:none;}
.slide span.before img{border-radius:40px 40px 40px 40px;}
.slide span.before img:hover{cursor:pointer;}
.slide span.after img{border-radius:40px 40px 40px 40px;}
.slide span.after img:hover{cursor:pointer;}

.slide .reff{
    width:100px;
    position:relative;
    top:-35px;
    left:-250px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

Result,

Despite my efforts, the x scrollbar remains active and I am unable to hide it. How can I solve this issue?

Thank you for your assistance.

Note: This project was solely done for personal improvement and not for monetary gain. It is a hobby of mine.

Thank you..

Answer №1

Your CSS specifies a width:140%;

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

Is it possible to utilize a DIV or SPAN value for JQuery plugin options?

I have integrated a Twitter plugin into my website with the following settings: jQuery(function($){ $(".tweet").tweet({ username: "username", count: 3, template: "{avatar}{text}{time}", loading_text: "loading tweets..." ...

How can Selenium be used to verify if an HTML5 validation has been activated?

When testing my web application with Selenium, I rely on HTML5 form validations for all the form validation. Is there a method in Selenium to verify if a form/input validation was triggered? ...

Setting up the jscolor chooser to work with Bootstrap buttons is a breeze

https://i.sstatic.net/rxICD.png I'm attempting to implement the jscolor chooser as a bootstrap button element. When retrieving the color code from the database, the input element displays the correct color chosen by the user. However, the bootstrap b ...

Saving the selected value from a dynamic dropdown menu in a JavaScript application to a MySQL database

This code successfully saves the values of departments but is encountering an issue with saving the degree value into MySQL. I am currently using PHP for this functionality. Here is the HTML code: <select class ="form-control" name="depa ...

What is the process for implementing an image as the background instead of a color for each column in a Google chart?

I'm currently working with Google Chart and I have set up a column chart. However, I am looking to display a background image instead of a background color in each column. Is this achievable with Google Chart? If so, how can I accomplish this? If anyo ...

Boosting your website with a slick Bootstrap 4 responsive menu that easily accommodates additional

I have incorporated a main menu in my website using the Bootstrap 4 navbar. However, I also have an additional div (.social-navbar) containing some extra menu items that I want to RELOCATE and INSERT into the Bootstrap menu only on mobile devices. Essentia ...

Searching with beautifulSoup's find_all() method across a sequence of HTML tags

I need to find specific tags within tags using BeautifulSoup's find_all() method on a website. For instance, I want to search for data within: <li class='x'> <small class='y'> The issue is that my current code is r ...

"Is there a method to make the height of one column in bootstrap equal to the combined heights of two columns

Looking to design a layout using bootstrap where I require one column to appear as two columns stacked vertically. To get a clearer idea, it would be beneficial if you could refer to the visual representation provided below. Additionally, I need it to be r ...

Using CSS to design a table-like structure with rows that span multiple columns

I am trying to generate a table dynamically using CSS and a JSON array. For example: In the code snippet provided, I have assigned a class of 'spannedrow' to span certain cells in the table, although the class is not defined yet. This is just ...

Guide on how to turn off a checkbox "toggle switch" using JavaScript

Being relatively new to CSS and HTML, I recently experimented with creating a checkbox toggle switch using this resource. I now have a specific requirement to disable this toggle switch upon clicking a different button labeled 'Reset', making it ...

Even after setting [attr.disabled]="false" in Angular, the Textarea still remains disabled

I am currently utilizing ngModel for a textarea, and I would like to be able to enable and disable the textarea based on a certain condition. Even though I have bound it correctly and the value is changing to [attr.disabled]="false", the textarea remains d ...

The font is displaying differently when compared to Figma

I'm currently using the font Gilroy-Bold for my project, but I'm facing inconsistencies between how it appears in Figma and my React application, even though they are both sourced from the same place. Figma: https://i.stack.imgur.com/3QvY4.png ...

Modify MUI's ListItemText component by targeting a specific span to implement customized styles using the useStyle hook

It's quite perplexing that although this is a straightforward task in regular CSS, it must be accomplished through MUI's useStyles for some peculiar reason. Essentially, I possess a ListItem containing a ListItemText. It appears as follows: cons ...

Uncheck all boxes except for the required or disabled boxes in Angular

HTML: <mat-selection-list #selectedColumns [(ngModel)] ="selectedOptions"> <div class= "content-section"> <mat-expansion-panel> <mat-expansion-panel-header> ...

Tips for reducing the size of input-group-addon in Bootstrap

https://i.sstatic.net/V7ywZ.png <div class="time input-group"> <span class="input-group-addon" id="basic-addon4">Start Time </span> <timepicker [(ngModel)]="mytime" required></timepicker></di ...

What is the best method for creating a fade effect on a div background?

I am trying to animate a div with the id #test from a 0 opacity background to an opacity of 0.7 using CSS rgba values, but for some reason, the .animate function is not working as expected. Here is my CSS: #test { background-color: rgba(0, 0, 0, 0); ...

Displaying motion of a vehicle with a series of images

Can anyone provide tips on creating an animation that uses multiple images in CSS or jQuery? I was inspired by a Windows skin and would like to create a rotating car animation. Is this possible? Any advice is greatly appreciated. Thank you! ...

Display tooltip upon hovering

Can someone help me with my dot navigation tooltips? I've managed to make them visible, but now I want them to only appear on hover. What am I missing? I've experimented with display: none and visibility but when I tried this code: span.tooltip ...

Create a hexagon shape using a Div element and start from one of its sides

Is there a way to create a Div with a background image that appears like a hexagon when viewed from one side? Check out this demo to see exactly what I'm looking for: Demo In the example/demo, the header is designed to look like a hexagon from its ...

Is there a way to create triangles on all four corners of an image using canvas in JavaScript?

In my code, I am currently working on drawing rectangles on the corners of an image using JavaScript. To achieve this, I first extract the image data from a canvas element. // Get image data let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height) ...