Storing each image from array into div

Javascript coding ..

Moderators: egami, macek, gesf

Post Reply
New php-forum User
New php-forum User
Posts: 10
Joined: Sun Mar 25, 2018 10:11 am

Tue Apr 03, 2018 1:27 pm

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.

New php-forum User
New php-forum User
Posts: 7
Joined: Mon Apr 02, 2018 1:19 pm

Tue Apr 03, 2018 1:41 pm

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?

New php-forum User
New php-forum User
Posts: 10
Joined: Sun Mar 25, 2018 10:11 am

Wed Apr 04, 2018 3:38 pm

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

Post Reply