Alex_Gole Posted September 29, 2015 Share Posted September 29, 2015 Hi all, I am a real newbie with PHP and mysql. I am trying to create a thumbnail carousel to present all the web applications we have in house.I am using some code from this demo because it does close to everything I need. The problem is that it displays only one image per slide and I would like to display multiple items per slide instead. Is it possible with a foreach loop for example? Code: <?php include_once('db.php'); $query = "select * from images order by id desc limit 6"; $res = mysqli_query($connection,$query); $count = mysqli_num_rows($res); $slides=''; $Indicators=''; $counter=0; while($row=mysqli_fetch_array($res)) { $title = $row['title']; $desc = $row['desc']; $image = $row['image']; if($counter == 0) { $Indicators .='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'" class="active"></li>'; $slides .= '<div class="item active"> <img src="images/'.$image.'" alt="'.$title.'" /> <div class="carousel-caption"> <h3>'.$title.'</h3> <p>'.$desc.'.</p> </div> </div>'; } else { $Indicators .='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"></li>'; $slides .= '<div class="item"> <img src="images/'.$image.'" alt="'.$title.'" /> <div class="carousel-caption"> <h3>'.$title.'</h3> <p>'.$desc.'.</p> </div> </div>'; } $counter++; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Dynamic image slider using twitter bootstrap & PHP with MySQL | PGPGang.com</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> img {border-width: 0} * {font-family:'Lucida Grande', sans-serif;} </style> </head> <body onload="changePagination('0','first')"> <h2>Dynamic image slider using twitter bootstrap & PHP with MySQL Example. => <a href="http://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script src="js/bootstrap.min.js"></script> <style> .carousel-caption { background-image: url("http://www.phpgang.com/wp-content/themes/PHPGang_v2/img/bg_sidebar.png"); } .carousel-inner>.item>img, .carousel-inner>.item>a>img { height:400px; width:700px; } </style> <div class="container" style="width: 730px;"> <h2>Dynamic Image Slider</h2><span style="float: right;margin-top: -30px;"><a href="addnew.php">Add More Images</a></span> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <?php echo $Indicators; ?> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <?php echo $slides; ?> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </body> </html> Thanks, Alex Quote Link to comment Share on other sites More sharing options...
Stefany93 Posted September 30, 2015 Share Posted September 30, 2015 (edited) Avoid using ready made solutions if you do can them yourself. They never work the way you want to. Even if you are 100% that they will. I think the problem might be in onload="changePagination('0','first')" but you will need to check the function yourself somewhere in the sea of the... Jquery. Edited September 30, 2015 by Stefany93 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.