Skip to main content
T
Taffypro
Known Participant
February 21, 2022
Question

Carousels randomize, timing, switch page, image size, source

  • February 21, 2022
  • 7 replies
  • 276 views

Hi,

I am somewhat familiar with Dreamweaver, .HTML, and Bootstrap. I have a few questions about carousels and code:

 

1) Is there a way to randomize slides? Can you randomize the order that slides appear in the carousel if they are labeled “slide_1.jpg” and so on?

 

2) Is there a way to set a timer on a web page? For example: if the end user doesn’t click, move their mouse, or falls asleep, can you make the current web page jump back to another/home page?

 

3) Image Size VS Fixing it with Code? When making a carousel is it better to crop each image by exact size like “1200x800px”, or is it to better to introduce some sort of class that alters it? Is a circle always circular if resized/on different screens? Any recommendations on image sizes/resolution?

 

4) I’ve seen two different ways to insert an image into a carousel.
FIRST is an overlay-image” <div class="overlay-image"style="background-image:url(./slide-2.jpg);">
The SECOND is an “img src” <img src="slide-2.jpg" alt=“My Image” width="1200" height=“800”>

What are the benefits to doing it either way?

 

Thanks so much for ANY help!!!

This topic has been closed for replies.

7 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 21, 2022

3.  For best results, use images that are a) scaled to same size & apsect ratio and b) optimized for the web in Photoshop's Export As panel.  You'll have greater control and reduce bandwidth.

 

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 21, 2022

1. I have used PHP scripts to shuffle carousel images from separate folders of images on the server. 

How many images are talking about?

 

 

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
February 21, 2022
quote

2) Is there a way to set a timer on a web page? For example: if the end user doesn’t click, move their mouse, or falls asleep, can you make the current web page jump back to another/home page?

 

By @Taffypro

 

or falls asleep........that gave me a chuckle. What you saying, the website is so boring it induces a comatosed state or the user is so old its just too much effort to keep awake.

O
osgood_
Legend
February 21, 2022
quote

3) Image Size VS Fixing it with Code? When making a carousel is it better to crop each image by exact size like “1200x800px”, or is it to better to introduce some sort of class that alters it? Is a circle always circular if resized/on different screens? Any recommendations on image sizes/resolution?

 

By @Taffypro

 

 

Yes, personally I would crop it to the size you want, at least the largest size of image you intend to use. If you use the largest size on mobile devices the image will not deteriorate in quality, however you dont need it to be as large either on smaller window width devices. The proper way is to serve different sized image to different devices but I think the majority of developers, maybe, work out the largest size image and use that across all devices.

 

A circle will always be a circle, no matter what device its viewed on.

O
osgood_
Legend
February 21, 2022
quote

 

1) Is there a way to randomize slides? Can you randomize the order that slides appear in the carousel if they are labeled “slide_1.jpg” and so on?

 


By @Taffypro

 

Yes, below is a more up to date version using javascript

 

Whilst I supplied the answer in the url that Ben posted that was back in 2017 (I cant remember that far back). It will still work but I think we have moved on a bit and the version below is a little more current:

 

There might be better ways, I'm not a Bootstrap expert - I dont use it but its pretty easy to do using Bootstrap or without Bootstrap. The code below just randomises an array of images and injects the html code into the Bootstrap 'carousel-inner' <div>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Random Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">


<!-- The slideshow/carousel -->
<div class="carousel-inner"></div>

<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>




<script>

// Randomise array function
function randomImage(array) {
array.sort(() => Math.random() - 0.5);
}

// Array of carousel images
let carouselImages  = [
{src: "la.jpg" , alt: "Los Angeles"},
{src: "chicago.jpg", alt: "Chicago"},
{src: "ny.jpg" , alt: "New York"}
];

// Randomise the array of images
randomImage(carouselImages);

// get carousel-inner <div> and assign to a variable
const carouselInner = document.querySelector(".carousel-inner");

// Loop through the carouselImages array and insert into 'carousel-inner' <div>
carouselImages.forEach(function(img) {
carouselInner.insertAdjacentHTML('afterbegin', `<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap5/${img.src}" alt="${img.alt}" class="d-block" style="width:100%">
</div>`)
})


// Add active class to first carousel-items <div>
document.querySelector('.carousel-item').classList.add('active');

</script>

</body>
</html>

 

 

 

 

O
osgood_
Legend
February 22, 2022
quote
quote

 

1) Is there a way to randomize slides? Can you randomize the order that slides appear in the carousel if they are labeled “slide_1.jpg” and so on?

 


By @Taffypro

 

 

There might be better ways

 

By @osgood_

 

There IS better ways, just add the 'active' class to the 'carousel-items' <div> dynamically:

 

<script>
const carouselItems = document.querySelectorAll('.carousel-item');
let rndSlide = Math.floor(Math.random() * carouselItems.length) ;
carouselItems[rndSlide].classList.add('active');
</script>

O
osgood_
Legend
February 21, 2022

4. Some developers prefer to use background images rather than  inline images. The main advantage of using background images is you can set the height of the div the background image is attached to for various mobile devices where as inline images height just gets smaller on mobile devices and may look silly unless you use srcset to deliver alternative images. Having said that object-fit:cover; can be applied to the inline image to attain the same kind of various heights you would get when using a background image.

 

But if you want to adjust the images format for mobile devices then you should be using srcset but it's a lot more management which is why a lot of developers prefer a 'hacky' sort of approach,

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    February 21, 2022

    1. https://community.adobe.com/t5/dreamweaver-discussions/bootstrap-carousel-using-random-images/td-p/9006906

    2. https://stackoverflow.com/questions/15719729/i-want-to-load-another-html-page-after-a-specific-amount-of-time

    3. https://community.adobe.com/t5/dreamweaver-discussions/bootstrap-carousel-how-to-size-images/td-p/9481806

    4.There is just the one way. See https://getbootstrap.com/docs/5.1/components/carousel/. An overlay is the give the image(s) another hue as in darken.

     

    As a sidenote: please refrain from asking more than one question at a time. Multiple questions lend to confusion.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices