Merge Html before/after slider in Html carousel

@QuentinLfJun 16.2021

Hi everyone,

I’m a beginner in html website creation. I managed to make an html code to create a slider that shows a before/after picture (see below). I also managed to make an html code to create a carousel with images (see below). My problem is that I still don’t understand how to combine the two html codes and therefore make a carousel not with still images, but with before/after slider.

Can someone help me?

Thanks a lot.

**Html slider before/after picture**
`<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=1″>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”https://www.dl.dropboxusercontent.com/s/q34x51te3ii7y3h/twentytwenty.css?dl=1″>
<link rel=”stylesheet” type=”text/css” href=”css/styles.css”>
</head>
<body>
<div class=”container”>
<div id=”before_after”>
<!– The before image is first –>
<img src=”https://www.dl.dropboxusercontent.com/s/sxfjip6kkkb1ho5/720p-1.jpg?dl=0″ />
<!– The after image is last –>
<img src=”https://www.dl.dropboxusercontent.com/s/ei2kqsutifc9nch/720p-2.jpg?dl=0″ />
</div>
</div>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script type=”text/javascript” src=”https://www.dl.dropboxusercontent.com/s/2yeva8cop0pr8cn/custom.js?dl=1″></script>
<script type=”text/javascript” src=”https://www.dl.dropboxusercontent.com/s/zxzh9jr1knt805v/jquery.event.move.js?dl=1″></script>
<script type=”text/javascript” src=”https://www.dl.dropboxusercontent.com/s/k8ikrxcys6pxwfr/jquery.twentytwenty.js?dl=1″></script>
</body>
</html>`

**Html carousel**
`<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Carousel Using Materialize</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
</head>
<style type=””>
body
{
margin: 0;
padding: 0;
background: #ffffff;
}
.carousel
{
transform: translateY(-100px);
height: 750px;
perspective: 600px;
}
.carousel .carousel-item
{
width: 400px;
}
.carousel .carousel-item img
{
width: 100%;
}
</style>
<body>
<div class=”carousel”>
<div class=”carousel-item”>
<img src=”720p-1.jpg”>
</div>
<div class=”carousel-item”>
<img src=”720p-2.jpg”>
</div>
<div class=”carousel-item”>
<img src=”https://upload.wikimedia.org/wikipedia/commons/1/11/B%C3%B6dele_Bregenzerwald_Panorama.jpg”>
</div>
</div>
<script src=”https://code.jquery.com/jquery-3.4.1.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.carousel’).carousel();
});
</script>
</body>
</html>`

to post a comment

HTML

23 Comments(s) _↴

@SempervivumJun 16.2021 — #This turned out to be a bit more complex than I assumed in the beginning. The reason is that both, the carousel and the before-after are using the mouse movement and one has to distinguish if the slider of the before-after should be moved or the carousel. Unfortunately I was not able to do this without modifying the original scripts.

In materialize.js I check at mousedown if the mouse is inside the control for the before-after. If so, moving of the carousel is suppressed.

From line 10685 in function _handleCarouselTap:

``<i>
 </i>
 // Check if the handle of the before-after has been clicked
 // and set the corresponding boolean variable:
 if ($(e.target).hasClass('twentytwenty-handle') ||
 $(e.target).hasClass('twentytwenty-left-arrow') ||
 $(e.target).hasClass('twentytwenty-right-arrow')) {
 this.beforeAfter = true;
 };<i>
 
 </i>`</CODE>
 
 From line 10720 in function  _handleCarouselDrag(e) {
 
 <CODE>`<i>
 </i>
 // If the handle of the before-after is being dragged
 // all drag actions for the carousel have to be suppressed
 // return from this function:
 if (this.beforeAfter) return;<i>
 
 </i>`</CODE>
 
 From line 10766 in function _handleCarouselRelease
 <CODE>`<i>
 </i>
 // Reset boolean variable for before-after:
 this.beforeAfter = false;<i>
 
 </i>``

@SempervivumJun 16.2021 — #jquery.twentytwenty.js is using the jQuery plugin "move". Unfortunately the move event didn't fire when the carousel was active, therefore I had to switch to the original mouse events.

From line 117

``<i>
 </i>            moveTarget.on("mousedown", onMoveStart);
 moveTarget.on("mousemove", onMove);
 $(document).on("mouseup", onMoveEnd);<i>
 </i>``

@SempervivumJun 16.2021 — #Joining the HTML was easy, just place the HTML of the before-after inside the container of the carousel item:

``<i>
 </i>    &lt;div class="carousel"&gt;
 &lt;div class="carousel-item"&gt;
 &lt;div class="before_after"&gt;
 &lt;!-- The before image is first --&gt;
 &lt;img src="images/dia2.jpg" /&gt;
 &lt;!-- The after image is last --&gt;
 &lt;img src="images/dia3.jpg" /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="carousel-item"&gt;
 &lt;div class="before_after"&gt;
 &lt;!-- The before image is first --&gt;
 &lt;img src="images/dia0.jpg" /&gt;
 &lt;!-- The after image is last --&gt;
 &lt;img src="images/dia1.jpg" /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="carousel-item"&gt;
 &lt;img src="https://upload.wikimedia.org/wikipedia/commons/1/11/B%C3%B6dele_Bregenzerwald_Panorama.jpg"&gt;
 &lt;/div&gt;
 &lt;/div&gt;<i>
 </i> ``

Note that I used my own images for testing as those from dropbox didn't load reliably.

@QuentinLfauthorJun 16.2021 — #Hi Sempervivum, Thanks you very much for your answer. For the test, I tried with images from my computer. I think I may have done something wrong I have the carousel with the two images but without the slider. In the carousel html, I copy/past the 2 links (in the head) and the 4 java sciprs (at the end) which were ine the slider html. Below, my new html and an image with the changes in materialize.js (a., b., c.), in jquery.twentytwenty.js (d.) and the result (e).

My html:

&lt;!DOCTYPE html&gt;<br/>
 &lt;html&gt;<br/>
 &lt;head&gt;<br/>
 &lt;meta charset="utf-8"&gt;<br/>
 &lt;title&gt;Carousel Using Materialize&lt;/title&gt;<br/>
 &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;<br/>
 &lt;link rel="stylesheet" type="text/css" href="https://www.dl.dropboxusercontent.com/s/q34x51te3ii7y3h/twentytwenty.css?dl=1"&gt;<br/>
 &lt;link rel="stylesheet" type="text/css" href="css/styles.css"&gt;<br/>
 &lt;/head&gt;<br/>
 &lt;style type=""&gt;<br/>
 body<br/>
 {<br/>
 margin: 0;<br/>
 padding: 0;<br/>
 background: #ffffff;<br/>
 }<br/>
 .carousel<br/>
 {<br/>
 transform: translateY(-100px);<br/>
 height: 750px;<br/>
 perspective: 600px;<br/>
 }<br/>
 .carousel .carousel-item<br/>
 {<br/>
 width: 400px;<br/>
 }<br/>
 .carousel .carousel-item img<br/>
 {<br/>
 width: 100%;<br/>
 }<br/>
 &lt;/style&gt;<br/>
 &lt;body&gt;<br/>
 &lt;div class="carousel"&gt;<br/>
 &lt;div class="carousel-item"&gt;<br/>
 &lt;img src="720p-1.jpg"&gt;<br/>
 &lt;/div&gt;<br/>
 &lt;div class="carousel-item"&gt;<br/>
 &lt;div class="before_after"&gt;<br/>
 &lt;!-- The before image is first --&gt;<br/>
 &lt;img src="720p-1.jpg" /&gt;<br/>
 &lt;!-- The after image is last --&gt;<br/>
 &lt;img src="720p-2.jpg" /&gt;<br/>
 &lt;/div&gt;			<br/>
 &lt;/div&gt;<br/>
 &lt;div class="carousel-item"&gt;<br/>
 &lt;img src="720p-3.jpg"&gt;<br/>
 &lt;/div&gt;<br/>
 &lt;/div&gt;<br/>
 &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;<br/>
 &lt;script type="text/javascript" src="https://www.dl.dropboxusercontent.com/s/2yeva8cop0pr8cn/custom.js?dl=1"&gt;&lt;/script&gt;<br/>
 &lt;script type="text/javascript" src="https://www.dl.dropboxusercontent.com/s/zxzh9jr1knt805v/jquery.event.move.js?dl=1"&gt;&lt;/script&gt;<br/>
 &lt;script type="text/javascript" src="https://www.dl.dropboxusercontent.com/s/k8ikrxcys6pxwfr/jquery.twentytwenty.js?dl=1"&gt;&lt;/script&gt;<br/>
 &lt;script src="https://code.jquery.com/jquery-3.4.1.js"&gt;&lt;/script&gt;<br/>
 &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;<br/>
 &lt;script type="text/javascript"&gt;<br/>
 $(document).ready(function(){<br/>
 $('.carousel').carousel();<br/>
 });<br/>
 &lt;/script&gt;<br/>
 &lt;/body&gt;<br/>
 &lt;/html&gt;

The results

![](https://www.dl.dropboxusercontent.com/s/xvar49yng2fyjkd/Sans%20titre%20-%201.png?dl=0)

@SempervivumJun 16.2021 — #c. is wrong, should have posted the context as the line numbers are moving when inserting code.

``<i>
 </i>            key: "_handleCarouselRelease",
 value: function _handleCarouselRelease(e) {
 if (this.pressed) {
 this.pressed = false;
 
 // Reset boolean variable for before-after:
 this.beforeAfter = false;
 
 } else {
 return;
 }
 
 clearInterval(this.ticker);
 this.target = this.offset;
 if (this.velocity &gt; 10 || this.velocity &lt; -10) {
 this.amplitude = 0.9 * this.velocity;
 this.target = this.offset + this.amplitude;
 }<i>
 </i>``

@SempervivumJun 16.2021 — #Sorry, forgot to mention this: After using a **class** "before_after" in the HTML we have to change the Javascript too:

``<i>
 </i>        $(".before_after").twentytwenty({
 default_offset_pct: 0.5, // How much of the before image is visible when the page loads
 orientation: 'horizontal', // Orientation of the before and after images ('horizontal' or 'vertical')
 no_overlay: true, //Do not show the overlay with before and after
 move_slider_on_hover: false, // Move slider on mouse hover?
 move_with_handle_only: true, // Allow a user to swipe anywhere on the image to control slider movement. 
 click_to_move: false // Allow a user to click (or tap) anywhere on the image to move the slider to that location. 
 });<i>
 </i>``

@QuentinLfauthorJun 16.2021 — #I did the modification (see image below) but I still have the same result.. Maybe the modified materialize script is wrong called in the html ? Or the before_after is not tacking into account ?

![](https://www.dl.dropboxusercontent.com/s/r2q32qz3q46gqui/Sans%20titre2.png?dl=0)

@SempervivumJun 16.2021 — #Did you notice my latest posting about class "before_after"?

@QuentinLfauthorJun 16.2021 — #I modified the javascript but still the same result ..

@SempervivumJun 16.2021 — #Initialisation for twentytwenty should be done after the script has been included:

``<i>
 </i>&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
 
 move this:
 &lt;!-- &lt;script type="text/javascript" src="https://www.dl.dropboxusercontent.com/s/2yeva8cop0pr8cn/custom.js?dl=1"&gt;&lt;/script&gt; --&gt;
 
 &lt;script type="text/javascript" src="https://www.dl.dropboxusercontent.com/s/zxzh9jr1knt805v/jquery.event.move.js?dl=1"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="https://www.dl.dropboxusercontent.com/s/k8ikrxcys6pxwfr/jquery.twentytwenty.js?dl=1"&gt;&lt;/script&gt;
 
 to this position:
 &lt;script type="text/javascript" src="https://www.dl.dropboxusercontent.com/s/2yeva8cop0pr8cn/custom.js?dl=1"&gt;&lt;/script&gt;
 
 &lt;script src="https://code.jquery.com/jquery-3.4.1.js"&gt;&lt;/script&gt;
 &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 $(document).ready(function(){
 $('.carousel').carousel();
 });
 &lt;/script&gt;<i>
 </i>``

If you still have trouble after modifying this: Can you put this online and post the URL?

@QuentinLfauthorJun 16.2021 — #Hum.... Ok so here is a link to download a .zip with my html and the folder with the twentytwenty and materialize js and css that I use (sure, there is no virus) : https://www.cjoint.com/c/KFqrrBlt62Z

@SempervivumJun 16.2021 — #OK, I downloaded it and located the following errors:

1. jQuery was included two times, including it at the end is wrong.

2. materialize was loaded from CDN, doing so it is not possible to get the modifications we made. You have to include the local one.

3. The JS in materialize.js was still faulty: The modifications in function _handleCarouselTap were at the wrong place:

``<i>
 </i>      key: "_handleCarouselTap",
 // // Check if the handle of the before-after has been clicked
 //           // and set the corresponding boolean variable:
 //           if ($(e.target).hasClass('twentytwenty-handle') ||
 //               $(e.target).hasClass('twentytwenty-left-arrow') ||
 //               $(e.target).hasClass('twentytwenty-right-arrow')) {
 //               this.beforeAfter = true;
 //           };
 value: function _handleCarouselTap(e) {
 // Fixes firefox draggable image bug
 if (e.type === 'mousedown' &amp;&amp; $(e.target).is('img')) {
 e.preventDefault();
 }
 
 // Check if the handle of the before-after has been clicked
 // and set the corresponding boolean variable:
 if ($(e.target).hasClass('twentytwenty-handle') ||
 $(e.target).hasClass('twentytwenty-left-arrow') ||
 $(e.target).hasClass('twentytwenty-right-arrow')) {
 this.beforeAfter = true;
 };
 
 this.pressed = true;
 this.dragged = false;
 this.verticalDragged = false;
 this.reference = this._xpos(e);
 this.referenceY = this._ypos(e);
 
 this.velocity = this.amplitude = 0;
 this.frame = this.offset;
 this.timestamp = Date.now();
 clearInterval(this.ticker);
 this.ticker = setInterval(this._trackBound, 100);
 }<i>
 </i>`</CODE>
 
 index.html:
 <CODE>`<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Carousel Using Materialize&lt;/title&gt;
 &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
 &lt;link rel="stylesheet" type="text/css"
 href="https://www.dl.dropboxusercontent.com/s/q34x51te3ii7y3h/twentytwenty.css?dl=1"&gt;
 &lt;link rel="stylesheet" type="text/css" href="css/styles.css"&gt;
 &lt;/head&gt;
 &lt;style type=""&gt;
 body
 {
 margin: 0;
 padding: 0;
 background: #ffffff;
 }
 .carousel
 {
 transform: translateY(-100px);
 height: 750px;
 perspective: 600px;
 }
 .carousel .carousel-item
 {
 width: 400px;
 }
 .carousel .carousel-item img
 {
 width: 100%;
 }
 &lt;/style&gt;
 
 &lt;body&gt;
 &lt;div class="carousel"&gt;
 &lt;div class="carousel-item"&gt;
 &lt;img src="img/720p-1.jpg"&gt;
 &lt;/div&gt;
 &lt;div class="carousel-item"&gt;
 &lt;div class="before_after"&gt;
 &lt;!-- The before image is first --&gt;
 &lt;img src="img/720p-1.jpg" /&gt;
 &lt;!-- The after image is last --&gt;
 &lt;img src="img/720p-2.jpg" /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="carousel-item"&gt;
 &lt;img src="img/720p-1.jpg"&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;!-- jQuery correct here --&gt;
 &lt;script src="https://code.jquery.com/jquery-3.4.1.js"&gt;&lt;/script&gt;
 
 &lt;!-- Modified version cannot be loaded from CDN --&gt;
 &lt;script src="materialize/js/materialize.js"&gt;&lt;/script&gt;
 
 &lt;script type="text/javascript"
 src="https://www.dl.dropboxusercontent.com/s/icbmyn4p59wbiif/jquery.event.move.js?dl=0"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"
 src="https://www.dl.dropboxusercontent.com/s/os31sk06byxwdul/jquery.twentytwenty.js?dl=0"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"
 src="https://www.dl.dropboxusercontent.com/s/ybepkhao3gakyxo/custom.js?dl=0"&gt;&lt;/script&gt;
 
 &lt;!-- jQuery in the wrong place here --&gt;
 &lt;!-- &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt; --&gt;
 
 
 &lt;script type="text/javascript"&gt;
 $(document).ready(function () {
 $('.carousel').carousel();
 });
 &lt;/script&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;<i>
 </i>``

@QuentinLfauthorJun 17.2021 — #Ok I made the modifications, in order to be sure, for the moment, I only work on local (I remplaced the url of the images and scripts by the computer path). But in my browser, nothing appears.. Below the modifications on the handleCarouselTap and my index html:

![](https://www.dl.dropboxusercontent.com/s/6hly8pwwbva8yjz/handleCarouselTap.png?dl=1)

&lt;!DOCTYPE html&gt;<br/>
 &lt;html&gt;<br/>
 &lt;head&gt;<br/>
 &lt;meta charset="utf-8"&gt;<br/>
 &lt;title&gt;Carousel Using Materialize&lt;/title&gt;<br/>
 &lt;link rel="stylesheet" href="materialize/css/materialize.min.css"&gt;<br/>
 &lt;link rel="stylesheet" type="text/css" href="css/twentytwenty.css"&gt;<br/>
 &lt;link rel="stylesheet" type="text/css" href="css/styles.css"&gt;<br/>
 &lt;/head&gt;<br/>
 &lt;style type=""&gt;<br/>
 body<br/>
 {<br/>
 margin: 0;<br/>
 padding: 0;<br/>
 background: #ffffff;<br/>
 }<br/>
 .carousel<br/>
 {<br/>
 transform: translateY(-100px);<br/>
 height: 750px;<br/>
 perspective: 600px;<br/>
 }<br/>
 .carousel .carousel-item<br/>
 {<br/>
 width: 400px;<br/>
 }<br/>
 .carousel .carousel-item img<br/>
 {<br/>
 width: 100%;<br/>
 }<br/>
 &lt;/style&gt;<br/>
 &lt;body&gt;<br/>
 &lt;div class="carousel"&gt;<br/>
 &lt;div class="carousel-item"&gt;<br/>
 &lt;img src="720p-1.jpg"&gt;<br/>
 &lt;/div&gt;<br/>
 &lt;div class="carousel-item"&gt;<br/>
 &lt;div class="before_after"&gt;<br/>
 &lt;!-- The before image is first --&gt;<br/>
 &lt;img src="720p-1.jpg" /&gt;<br/>
 &lt;!-- The after image is last --&gt;<br/>
 &lt;img src="720p-2.jpg" /&gt;<br/>
 &lt;/div&gt;			<br/>
 &lt;/div&gt;<br/>
 &lt;div class="carousel-item"&gt;<br/>
 &lt;img src="720p-3.jpg"&gt;<br/>
 &lt;/div&gt;<br/>
 &lt;/div&gt;<br/>
 &lt;!-- jQuery correct here --&gt;<br/>
 &lt;script src="<URL url="https://code.jquery.com/jquery-3.4.1.js%22%3E%3C/script">https://code.jquery.com/jquery-3.4.1.js"&gt;&lt;/script</URL>&gt;
 
 &lt;!-- Modified version cannot be loaded from CDN --&gt;<br/>
 &lt;script src="materialize/js/materialize.js"&gt;&lt;/script&gt;
 
 &lt;script type="text/javascript" src="js/jquery.event.move.js"&gt;&lt;/script&gt;<br/>
 &lt;script type="text/javascript" src="js/jquery.twentytwenty.js"&gt;&lt;/script&gt;<br/>
 &lt;script type="text/javascript" src="js/custom.js"&gt;&lt;/script&gt;<br/>
 &lt;script type="text/javascript"&gt;<br/>
 $(document).ready(function(){<br/>
 $('.carousel').carousel();<br/>
 });<br/>
 &lt;/script&gt;<br/>
 &lt;/body&gt;<br/>
 &lt;/html&gt;

@SempervivumJun 17.2021 — #I've created a zip file of my version based on the files you sent earlier. Check if it works for you too.

https://ulrichbangert.de/div/thread652-webdev-merged-to.zip

@QuentinLfauthorJun 17.2021 — #Very nice, so the carousel with the slider work together, but I have the impression that the slider bugs a bit when you move the mouse too fast. This bug was not present when I made a simple slider image (outside the carousel). See the video below

https://www.cjoint.com/c/KFrp6g6ny6Z

@SempervivumJun 17.2021 — #Yes, I noticed this too. Gonna look into this issue. I suspect that the reason is, that I switched to using the original mouse events instead of the move plugin.

@QuentinLfauthorJun 17.2021 — #Here is an exemple of the slider reactivity out of a carousel, there is no bug.. Maybe the problem comes from the mouse function ?

Video of slider out of carousel

https://www.cjoint.com/c/KFrqAEyXDCZ

@QuentinLfauthorJun 18.2021 — #I think the problem comes from the jquery.twentytwenty.js. I Remplaced:

L117:

moveTarget.on("mousedown", onMoveStart);<br/>
 moveTarget.on("mousemove", onMove);<br/>
 $(document).on("mouseup", onMoveEnd);

by the initial one L 117:

moveTarget.on("movestart",onMoveStart);<br/>
 moveTarget.on("move",onMove);<br/>
 moveTarget.on("moveend",onMoveEnd);

And I have this results in vidéo: https://www.cjoint.com/c/KFsoZxNMl4Z

The slider reactivity seems ok

@SempervivumJun 18.2021 — #That's fine, thus my assumption was correct, the issue was caused by switching to the original mouse events.

@QuentinLfauthorJun 18.2021 — #Yes it's really fine. Maybe one last thing, Is it possible to say that only the slider of the foreground image (i.e. the selected one) is active? Because for example (in the video) you can move the sliders of the images in the background..

vidéo: https://www.cjoint.com/c/KFsprIOxZpZ

@SempervivumJun 18.2021 — #In function onMove in line 106 in jquery.twentytwenty.js check additionally if the container of the carousel-item has the class "active":

``<i>
 </i>      var onMove = function(e) {
 if (container.hasClass("active") &amp;&amp; container.closest('div.carousel-item').hasClass('active')) {
 sliderPct = getSliderPercentage(e.pageX, e.pageY);
 adjustSlider(sliderPct);
 }
 };<i>
 </i> ``

(not tested)

Tomorrow I'm gonna be busy with some other activities. If it doesn't work, maybe someone else can help out.

@iamkajalJun 19.2021 — #you should try this

&lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;<br/>
 &lt;!-- Indicators --&gt;<br/>
 &lt;ol class="carousel-indicators"&gt;<br/>
 &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;<br/>
 &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;<br/>
 &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;<br/>
 &lt;/ol&gt;
 
 &lt;!-- Wrapper for slides --&gt;<br/>
 &lt;div class="carousel-inner"&gt;<br/>
 &lt;div class="item active"&gt;<br/>
 &lt;img src="la.jpg" alt="Los Angeles"&gt;<br/>
 &lt;/div&gt;
 
 <i>    </i><CODE>&lt;div class="item"&gt;
 <i>    </i>  &lt;img src="chicago.jpg" alt="Chicago"&gt;
 <i>    </i>&lt;/div&gt;
 
 <i>    </i>&lt;div class="item"&gt;
 <i>    </i>  &lt;img src="ny.jpg" alt="New York"&gt;
 <i>    </i>&lt;/div&gt;</CODE>
 &lt;/div&gt;
 
 &lt;!-- Left and right controls --&gt;<br/>
 &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;<br/>
 &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;<br/>
 &lt;span class="sr-only"&gt;Previous&lt;/span&gt;<br/>
 &lt;/a&gt;<br/>
 &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;<br/>
 &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;<br/>
 &lt;span class="sr-only"&gt;Next&lt;/span&gt;<br/>
 &lt;/a&gt;<br/>
 &lt;/div&gt;

@migelcartmanJun 20.2021 — #I also have the same part of code in my project. Thanks for recommendation [https://mlsdev.com/services/custom-software-development](https://mlsdev.com/services/custom-software-development) The use of software development company solutions also helps in the automation of processes. This further ensures that processes within the organization are simplified, which in turn, increases productivity and profits. For instance, software development teams can create fully integrated mobile applications and social networking applications that can help users in interacting with each other through various modes. Likewise, an effective software development company can create a CRM system that is customized for the organization.

Also in #HTML _↴

Print control table row scrolling Form sending help

Success!

Help @QuentinLf spread the word by sharing this article on Twitter...

Tweet This

Merge Html before/after slider in Html carousel

23 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Merge Html before/after slider in Html carousel

23 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

23 Comments(s) _↴

Also in #HTML _↴