Storing each image from array into div

Javascript coding ..

Moderators: gesf, Michalio

Post Reply

Hello forum,

Trying to reproduce image slider found on youtube.Here is the original code. I hope i'm posting in right thread

Code: Select all

<!DOCTYPE html>





<style type="text/css">


font-family: verdana,sans-serif;

margin: 0;



width: 800px;

position: relative;

margin: auto;



position: absolute;

top: 0;

color: #f2f2f2;

padding: 8px 12px;

font-size: 12px;



display: none;


.prev , .next{

position: absolute;

top: 50%;

font-size: 18px;

font-weight: bold;

padding: 16px;

margin-top: -22px;

border-radius: 0 3px 3px 0;

color: #fff;

cursor: pointer;



right: 0;

border-radius: 3px 0 0 3px;



background-color: rgba(0,0,0,0.8);



text-align: center;

position: absolute;

bottom: 8px;

width: 100%;

color: #f2f2f2;

font-size: 15px;

padding: 8px 22px;



width: 13px;

height: 13px;

background: gray;

display: inline-block;

border-radius: 50%;

cursor: pointer;






@keyframes fade{

from {opacity: 0.4;}

to {opacity: 1;}


.active, .dot:hover {

background-color: #333;




<div class="slideshow-container">

<div class="myslides fade">

<div class="numbers">1 / 4</div>

<div><img src="slider/1.jpg"></div>

<div class="caption">Text 1</div>


<div class="myslides fade">

<div class="numbers">2 / 4</div>

<div><img src="slider/2.jpg"></div>

<div class="caption">Text 2</div>


<div class="myslides fade">

<div class="numbers">3 / 4</div>

<div><img src="slider/3.jpg"></div>

<div class="caption">Text 3</div>


<div class="myslides fade">

<div class="numbers">4 / 4</div>

<div><img src="slider/4.jpg"></div>

<div class="caption">Text 4</div>


<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>



<div style="text-align:center">

<span class="dots" onclick="currentSlide(1)"></span> 

<span class="dots" onclick="currentSlide(2)"></span> 

<span class="dots" onclick="currentSlide(3)"></span> 

<span class="dots" onclick="currentSlide(4)"></span> 


<script type="text/javascript">

var slideIndex = 1;


function plusSlides(n){

showSlide(slideIndex += n);


function currentSlide(n) {

showSlide(slideIndex = n);


function showSlide(n){

var i;

var slides = document.getElementsByClassName("myslides");

var dots = document.getElementsByClassName("dots");

if (n > slides.length) { slideIndex = 1};

if (n < 1) { slideIndex = slides.length};

for (i=0;i<slides.length;i++) {

slides[i].style.display = "none";


for (i=0;i<dots.length;i++) {

dots[i].className = dots[i].className.replace(" active","");


slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";




I want to display images stored in database.Here is what i got

Code: Select all

function getImg(){
    global $con;
    $get_cats="select * from product";
    $run_cats=mysqli_query($con, $get_cats);

        <img src='admin_area/product_images/$cat_image'/>
and my html

Code: Select all

   <div  class="myslides">
            <?php getImg() ?>

The result is, all images are stacked one under another.The discripency between my code and original code is that each image has a separate div.
My question is how can I generate as many divs with images as there are images in database present in this function <?php getImg() ?>.
Thank you for helping me.

I'm half asleep so I may be misunderstanding your question, but can't you just put put div tags around the img tag in your getImg function?

Fantastic. Even half asleep you answered my question.Thank you.
Post Reply