Personalized picture carousel

Struggling to build my own simple image slider using javascript and it's not cooperating. I need it to cycle through three images. Check out my code:

var counter = 1;

setInterval(function animate() {

var slideshows = document.getElementsByClassName("slide");

for(var i=1; i <slideshows.length+1; i++) {
    if(i == counter) {
        slideshows[i-1].width = "170px";
    } else {
        slideshows[i-1].width = "0px"
    }
}

if(counter == 3) {
    counter = 1;
} else {
    counter++;    
}

}, 1000);

Here is the corresponding HTML:

<div id="s1" class="slide"></div>
<div id="s2" class="slide"></div>
<div id="s3" class="slide"></div>

The goal is simple: adjust the height of the current slide to 170px, with others set to 0px. However, the first slide remains displayed at all times.

javascripthtmlcssslider

Answer №1

Make sure to utilize slides[i-1].style.width = "0px" instead of mistakenly using slides[i-1].width = "0px"
jsfiddle demo: VIEW

Answer №2

This particular example appears to be lacking image elements, making it somewhat oversimplified. I will assume that your HTML code resembles the following structure:

<div id="s1" class="slide"><img src="s1.jpg"/></div>
<div id="s2" class="slide"><img src="s2.jpg"/></div>
<div id="s3" class="slide"><img src="s2.jpg"/></div>

The issue here lies in the fact that the size of the parent div does not impact the size of its child elements, causing them to overflow outside the container. You can gain more insight into this by checking out a resource like this blog post on CSS overflow property. To visualize this better, you can inspect the DOM using tools such as Firebug.

An easy solution to rectify this problem is to include the "overflow: hidden" CSS property in the .slide class rule.

.slide {
  overflow: hidden;
}

By applying this CSS style, anything extending beyond the boundaries of the div should no longer be visible!

Answer №3

<html>
<head>
    <meta charset="utf-8">
    <title>Interactive Banner Demo - Jssor Slider, Slideshow with JavaScript Code Sample</title>
</head>
<body style="background:#fff;">
    <script>
    </script>
    <script type="text/javascript" src="../js/Jssor.Slider.Min.js"></script>
    <script>
        var _SlideshowTransitions = [ 
            // Insert custom slideshow transitions here
            ];
    </script>
    <script>
        jssor_slider_custom = function (containerId) {
            var slider_custom = new $JssorSlider$(containerId, {
                $AutoPlay: true,
                $AutoPlayInterval: 1500,
                $SlideshowOptions: { 
                    $Class: $JssorSlideshowRunner$,
                    $Transitions: _SlideshowTransitions,
                    $TransitionsOrder: 1,
                    $ShowLink: 2,
                    $ContentMode: false 
                }
            });
        }
    </script>
    <!-- Jssor Slider Begin -->
    <div id="slider_custom_container" class="slider_custom" style="position: relative; width: 600px;
        height: 300px;">
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>
        <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
            overflow: hidden;">
            <div>
                <a u=image href="#"><img src="../img/landscape/01.jpg" /></a>
            </div>
            <div>
                <a u=image href="#"><img src="../img/landscape/02.jpg" /></a>
            </div>
            <div>
                <a u=image href="#"><img src="../img/landscape/03.jpg" /></a>
            </div>
            <div>
                <a u=image href="#"><img src="../img/landscape/04.jpg" /></a>
            </div>
        </div>
        <a style="display: none" href="http://slideshow.jssor.com">Image Slider</a>
        <script>
            jssor_slider_custom('slider_custom_container');
        </script>
</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 am attempting to monitor the addliquidity event on Uniswap's router02

I am currently attempting to monitor addliquidity events in order to extract data on newly added pairs const Web3 = require('web3'); const NODE_URL = "https://mainnet.infura.io/v3/d3c5832256754c85be86b4c97de2d3d3" const web3 = new We ...

javascriptnode.jsweb3jsuniswap

Positioning items to align an image in the center with both left and right elements

There's a simple question I have for all you HTML and CSS experts out there. I'm attempting to center align a list next to an image, but I can't seem to figure out how to position the list to the left or right of the image. This is what my ...

htmlcss

What are the best scenarios for implementing PHP(cURL) instead of JavaScript (Axios, Ajax, Fetch)?

When deciding between using a JavaScript program or a PHP one to interact with a web API for making HTTP requests such as POST and GET, which option would be more suitable? ...

javascriptphpajaxcurlaxios

When the progress bar is clicked, the background color changes and then changes back again

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 https://i.stack.imgur.com/Bnd0k.png I have created a progress bar that resembles the screenshot provided. When I hover over it, the color changes to green. However, I am looking for assistanc ...

javascripthtmlcsstwitter-bootstrap

Updating a JSON property in JavaScript on the fly

I am looking to dynamically replace the content of "placeholder" with {"John": "Dough"} using a function call. This initial method seems to work fine: a = {foo:{bar:{baz:"placeholder"}}}; a.foo.bar.baz = {"John" : "Dough"}; console.log(JSON.stringify(a)) ...

javascriptnode.js

"Data being presented on the page is causing the generation of numerous tables

I've been working on a small project that involves displaying data from a database. However, the issue I'm facing is that the page ends up showing multiple tables instead of just one. For instance, if there are two records saved in the database ...

phphtml

Is it important to position elements based solely on the parent container?

My frustration with element positioning persists: <div id="container"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </div> #div1 { right:0; // I want its right border to be 0px from th ...

htmlcss

Struggling with Sequelize's refusal to add new records to the database

In my backend server, there is a function defined as follows: async create(data) { try { console.log("User ", data); const newUser = await models.User.create({ ...data, password: await bcrypt.hash(`${data.password} ...

javascriptnode.jsexpresssequelize.jsbackend

What is the best way to retrieve a lengthy HTML page string parameter from a Java request?

While working with Javascript, I encountered an issue with sending HTML pages in post data. In my Java code, I used String html = request.getParameter("templateHtml"); and during debugging, I could see the HTML string in the request. However, the "html" va ...

javajavascriptjqueryhtmlajax

Is there a way to set a custom width or make the description responsive?

Is there a way to ensure that the description is responsive and automatically goes to the next line instead of extending horizontally? Although using textField could fix this issue, I also need to adjust the padding and outline. Are there any alternative s ...

javascriptreactjsmaterial-ui

How to utilize Vue.js method to retrieve child prop?

In my Vue.js project, I have created two components. The main component uses a child component called NoteRenderer, which includes a prop named data_exchange. My goal is to update this prop from the main component when a button is clicked. I attempted to a ...

javascriptvue.js

Arranging array based on the sequence of another array

There are two arrays that I am working with: Main array: const items = [ "Лопата 123", "Empty Forest", "Forever young", "My ears", "Most Important", "16 Tons", "Operation ...

javascriptarrayssorting

I am having an issue with an input field not reflecting the data from the Redux state in my React app,

I am currently working on a todo list project using the MERN stack with Redux for state management. One issue I am facing is that the checkboxes for completed tasks are not reflecting the correct state from Redux when the page loads. Even though some tasks ...

javascriptreactjsredux

In a React app, there are instances where `localstorage.getitem('key')` may result in returning null

I've encountered a strange issue while building a login form that sets a JWT token in localstorage. The problem arises when, despite being able to see the token in my console.log, setting localstorage.getitem('idToken') sometimes returns nul ...

javascriptreactjsreduxjwtaxios

PHP implementation that enables multi-threaded ajax calls

I'm working on developing a web app that can detect stock availability for one or multiple e-commerce items based on the URLs inputted by the user. These URLs can be separated by commas. Currently, I am making AJAX calls to one of my PHP scripts for e ...

javascriptphpajaxmultithreading

the cached token retrieved by adal is consistently empty

To retrieve a cached token, I am utilizing the react-adal api import { authContext, } from '../auth' const AvatarContainer = () => { getPersonPhoto(authContext) return ( <Avatar /> ) } async function getPersonPhoto(au ...

javascriptreactjsadaladal.js

Unexpected provider error in AngularJS when using basic module dependencies

I am encountering an issue with my module setup involving core, util, and test. The util module has no dependencies and one provider The test module depends on util and core, and has one controller The core module depends on util, and has a provider that ...

javascriptangularjs

Transferring an Array from PHP to Javascript

I'm attempting to pass a PHP array so that I can use it in JavaScript. The PHP code I have written is shown below: <?php $link = mysqli_connect("localhost", "root", "password", "database"); /* check connection */ if (mysqli_connect_errn ...

javascriptphpmysqli

Bootstrap 4: The mystery behind why the popover fails to appear inside a scrollable dropdown

Is there a way to replicate the behavior of Bootstrap 3 dropdowns with scrollbars on hover and popovers in Bootstrap 4? It seems that setting overflow:hidden; for scrolling functionality in dropdown menus also hides the popover. I have tried using containe ...

javascriptjquerycssbootstrap-4bootstrap-popover

Albania's Interactive Mapping Tool

I am interested in creating an interactive map similar to the one found at using jQuery and SVG, however I am not sure where to begin. I have the map saved as a .svg.xml file (available here: albania.xml) but I am unsure of what steps to take next. Can an ...

jqueryxmlhtmlsvg