Dynamic Bootstrap Carousel showing Blank Page - php

I was making a Dynamic Bootstrap Carousel using PHP. I was watching this and making it: Dynamic BootStrap Carousel
But I got stuck at a place where I am getting a blank page with no error, no source code on inspect element! My code is bit different than the actual link code which is given above.
Here is my code:
<?php
require 'php/dbh.inc.php'; //Database Connection File
$select= 'SELECT*FROM projects;';
$result= mysqli_query($conn, $select);
$count=mysqli_num_rows($result);
if($count<1){
echo "No rows found!";
}
else{
while($row=mysqli_fetch_array($result)){
$rows[]=$row; //Mostly this section is the problem
}
return $rows;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script >
$(function(){
$("#includedContent").load("include.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
<div id="home">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
<li data-target="#carouselExampleFade" data-slide-to="3"></li>
<li data-target="#carouselExampleFade" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Menu/1.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/2.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/3.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/4.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/5.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="about">
<h1 class="about-head">About Me</h1>
<div class="container">
<div class="row" id="textimg">
<div class="col-md-6 col-sm-12">
<img src="Images/sample.png" class="img-fluid">
</div>
<div class="col-md-6 col-sm-12">
<p>
My name is Kabir Jhangiani, I am an aspiring photojournalist. I reside in this busy city Mumbai, where observing people, their events & capturing the most of it those daily lives became my favourite past time. I want to speak a story through a picture that not only shows what it shows but also speaks out my mind. It’s very interesting to observe people, their activities & what’s happening in their surroundings. My interest towards Street photography started getting more intense when I started covering events & cultures from Ganesh Festival to Muharram.
I would like to capture all of these moments on my camera to speak your style of story through my words. Painters express their art through paint, writers through words, I would like to capture the moments through emotions in them.
I am very fond of documenting different festivals, it talks about the history of the festival and the reasons behind it to celebrate.
Photography to me is, creating history, when we live in the future, we can live in the moment while looking at its visuals.
</p>
</div>
</div>
</div>
</div>
<div id="work">
<h1 class="work-head">Work</h1>
<div class="container">
<div id="workCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<?php
$i=0;
if(count($rows)){
foreach ($rows as $value) {
if($i==0){
echo '<li data-target="#workCarousel" data-slide-to="0" class="active"></li>';
$i++;
}else{
echo '<li data-target="#workCarousel" data-slide-to="0"></li>';
$i++;
}
}
}
?>
</ol>
<div class="carousel-inner">
<?php
$a=0;
if(count($rows)){
foreach ($rows as $value) {
if($a==0){
echo '<div class="carousel-item active">
<img src="Images/Projects/'.$value["ImageName"].'" class="d-block w-100" alt="...">
</div>';
$a++;
}else{
echo ' <div class="carousel-item">
<img src="Images/Projects/'.$value["ImageName"].'" class="d-block w-100" alt="...">
</div>';
$a++;
}
}
}
?>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#workCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#workCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
Mostly according to me the problem is in the while loop section or require line because when i comment that section, my content shows up. Please help!

Related

wordpress theme no connection

So I'm building a WordPress theme for the first time and a few days back I got a memory size error that didn't make sense to me because there was absolutely nothing special inside, just some simple HTML. Every time I separated the HTML and added the PHP, there was an error. So the solution was it to Update PHP and a lot of people told me the same. Now I did that, and I have an entire different problem.
The page looks like this:
<?php
/**
* Front to the WordPress application. This file doesn't do anything, but loads
* wp-blog-header.php which does and tells WordPress to load the theme.
*
* #package WordPress
*/
/**
* Tells WordPress to load the WordPress theme and output it.
*
* #var bool
*/
define( 'WP_USE_THEMES', true );
/** Loads the WordPress Environment and Template */
require __DIR__ . '/wp-blog-header.php';
And I can't even login into WordPress anymore. I'm not sure what to do.
I don't know if the header is the problem or the way I wrote the code, or even maybe something totally different.
HEADER CODE :
<!DOCTYPE html>
<html <?php language_attributes();?>>
<head>
<meta charset="<?php bloginfo("charset");?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php
wp_head();
?>
</head>
<body>
<!--navbar -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Conesphere Links</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!--navbar ende-->
FUNCTIONS CODE:
<?php
/**
*
* TEMPLATE NAME: functions.php
* DESCRIPTION: Add features to wordpress theme
*
*/
function theme_sstyle(){
/**Include style files */
wp_enqueue_style("style", get_template_directory_uri() ."/style.css", array(), "1.0");
wp_enqueue_style("bootstrap","https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css", array(), "1.0");
}
add_action('wp_enqueue_scripts', 'theme_sstyle');
function theme_scripts(){
/**Include script files */
wp_enqueue_scripts("bootstrap-bundle-js","https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js", array(),"5.2.0",true);
wp_enqueue_scripts("bootstrap-popper","https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js", array(),"5.2.0",true);
wp_enqueue_scripts("bootstrap-js","https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js", array(),"5.2.0",true);
}
add_action('wp_enqueue_scripts', 'theme_scripts')
?>
FRONTPAGE CODE:
<?php
get_header();
?>
<!--hero -->
<div class="main">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/slide1.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/slide2.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/slide3.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!--hero ende -->
<h1>Hello, world! aa</h1>
<p>paragraph </p>
<!--content anfang-->
<div class="container">
<div class="d-flex">
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!--content ende-->
<!--content anfang-->
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!--content ende-->
<!--content anfang-->
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<!--content ende-->
<!--content anfang-->
<div class="container">
<div class="d-flex">
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!--content ende-->
<!--content anfang-->
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!--content ende-->
<!--content anfang-->
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<!--content ende-->
<!--main ende-->
<footer>
Impressum
</footer>
</div>
<?php
get_footer();
?>

Lots of errors:
Use the single quote in PHP.
in function theme_scripts() you used wp_enqueue_scripts but it should be wp_enqueue_script remove extra (s)
theme_scripts & theme_sstyle give proper prefix based names to these functions.
get_stylesheet_directory_uri() if this is your main theme then use get_template_directory_uri()
don't use TEMPLATE NAME: functions.php in functions.php docs tag.

Get a modal carousel to open on the image that has been selected

I'm trying to get the carousel that's within a modal to open up on the image that has been selected by the user. I've tried data-slide-to="##" but no look with that. I'll post the code below. I'll remove repeated code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Name LTD - Gallery</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top">
<div class="container">
<a class="navbar-brand" href="index.php">Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Gallery
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="bg-primary py-5 mb-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-12">
<h1 class="display-4 text-white mt-5 mb-2">Gallery</h1>
<p class="lead mb-5 text-white-50">Below Is A Portfolio Of Just A Few Of The Jobs We Have Done So Far </p>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<h1 class="font-weight-light text-center text-lg-left mt-4 mb-0">Click An Image To Enter Slideshow</h1>
<hr class="mt-2 mb-5">
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="0">
<img class="img-fluid img-thumbnail" src="img/img14.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="1">
<img class="img-fluid img-thumbnail" src="img/img15.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="2">
<img class="img-fluid img-thumbnail" src="img/img9.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="3">
<img class="img-fluid img-thumbnail" src="img/img10.png" alt="">
</a>
</div>
</div>
</div>
<div class="container text-center">
<div class="modal fade imgGal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="img/img14.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img15.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img9.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img10.png" alt="..." style="width: 100%">
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Name 2020</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
So currently when the user selects image 1, image 1 is shown on the carousel but then if image 2 is selected image 1 still shows first etc. So what I want is for the user to be able to select say image 3, and image 3 be selected on the carousel so they don't have to scroll through the carousel to get to it.

You should point your images to the slider also by doing data-target="#carousel-example-generic" where as you are pointing the tag to only modal so that is the reason it is not updating the slider,
So may be the following code helps you
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img14.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="0">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img15.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="1">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img9.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="2">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img10.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="3">
</a>
</div>
</div>

image carousel in bootstrap card with php

I'm using php to show images from database. I'm trying to make a carousel, because now my images are under each other. I don't really understand how should I do that because I use $row['image'] only once to fetch data inside a while and carousel needs more classes with active tag aswell. This is how it looks like now:
the end of the php:
...
while ($row = $res->fetch_assoc()) {
$image = $row['image'];
$data[] = $row;
?>
<?php
echo "<img class='card-img-top' style='padding-bottom: 5px;' src='" . $image . "' />";
}
?>
this is how it looks now:
and this is how it should look:
The carousel I'd like to use: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel
The carousel html:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
As you can see, there are different divs. But I can't use the $image more than once. So how should I implement it?

Collect items and buttons from DB, make sure that only first item/button has active class. Working sample by linked code:
<?php
$carouselItems = '';
$carouselButtons = '';
$i = 0;
while ($row = $res->fetch_assoc()) {
$class = ($i == 0) ? 'active' : '';
$carouselButtons .= "<li data-target='#demo' data-slide-to='{$i}' class='{$class}'></li>";
$carouselItems .= "<div class='carousel-item $class'>
<img src='{$row['image']}' width='1100' height='500'>
</div>";
var_dump($row);
$i++;
}
?>
<body>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<?php echo $carouselButtons; ?>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<?php echo $carouselItems; ?>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>

Dynamic Carousel in Laravel not working displays only one image

I'm trying to create a dynamic carousel in laravel but i see only one image. I have looking for solutions from many hours but still i'm stucked
I have tried to change my code from this solution Dynamic carousel in PHP Laravel only shows one image but didn't work
home.blade.php code
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"> </li>
</ol>
<div class="carousel-inner" role="listbox">
#foreach($sliders as $slider)
<div class="carousel-item active">
<img src="{{url('images', $slider->image)}}" class="d-block w-100" alt="...">
</div>
#endforeach
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
master.blade.php code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="{{asset('favicon.ico')}}">
<title>1233</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min. css" integrity="sha384- Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper. min.js" integrity="sha384- ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</head>
<body>
#include('front.nav')
#yield('content')
#include('front.footer')
</body>
</html>
Any help will be appreciated.

The issue why its not working is because the loop
#foreach($sliders as $slider)
<div class="carousel-item active">
<img src="{{url('images', $slider->image)}}" class="d-block w-100" alt="...">
</div>
#endforeach
is adding active class to all the images. You only need active on a single image you can set active on a single using some php workaround like this.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</ol>
<div class="carousel-inner">
#foreach($sliders as $key => $slider)
<div class="carousel-item {{$key == 0 ? 'active' : '' }}">
<img src="{{url('images', $slider->image)}}" class="d-block w-100" alt="...">
</div>
#endforeach
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
also you forgot to close the <div class="carousel-inner"></div> tag.

<div class="carousel-item {{$loop->iteration == 1 ? 'active' : ''}}">

In the <head> section,
jquery script should be written first, tailed by bootstrap.
If the code is right and displaying a single image earlier, it should work now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

data-animation effects not working in codeigniter php

Hi i have used bootstrap carousel in my website.I have used data animation effects for moving texts from right to left from up and down and for image animation effects.But the data animation effects is not working in codeigniter php.
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="item active ">
<h3 class="heading82">OPEN SOURCE <span class="heading81">C</span>ONTENT <span class="heading81">M</span>ANAGEMENT <span class="heading81">S</span>YSTEMS</h3>
<img src="<?php echo base_url();?>theme/slider/3_1 (4).png" class="heading84"><h3 class="heading83">complete control over the content of the website from personalized admin panel</h3><img src="<?php echo base_url();?>theme/slider/4_2 (4).png" class="heading85">
<div class="captions">
<img src="<?php echo base_url();?>theme/slider/z2.png" class="heading94" data-animation="animated bounceInRight">
<img src="<?php echo base_url();?>theme/slider/z1.png" class="heading95" data-animation="animated bounceInRight">
<img src="<?php echo base_url();?>theme/slider/z.png" class="heading95" data-animation="animated bounceInRight">
<img src="<?php echo base_url();?>theme/slider/z3 (3).png" class="heading96" data-animation="animated bounceInRight">
</div>
<div class="carousel-caption" >
<h3 data-animation="animated bounceInDown" class="heading86">
<img src="<?php echo base_url();?>theme/slider/5.png" class="heading87"> Easy edit, delete and create new content
</h3>
<h3 data-animation="animated bounceInDown" class="heading88">
<img src="<?php echo base_url();?>theme/slider/5.png" class="heading89"> Manage your own online store with little or zero technical expertise
</h3>
<h3 data-animation="animated bounceInDown" class="heading90">
<img src="<?php echo base_url();?>theme/slider/5.png" class="heading91"> Convert your traffic into customers
</h3>
<h3 data-animation="animated bounceInDown" class="heading92">
<img src="<?php echo base_url();?>theme/slider/5.png" class="heading93"> Custom Design templates to manage your blogs
</h3>
</div>
</div> <!-- /.item -->
<!-- Second slide -->
<div class="item ">
<h3 class="heading43">FULLY <span class="heading41">R</span>ESPONSIVE & <span class="heading41">SEO</span> OPTIMIZED <span class="heading41">W</span>EBSITE <span class="heading41">D</span>ESIGN</h3>
<img src="<?php echo base_url();?>theme/slider/1 (2).png" class="heading45"><h3 class="heading44">Optimal viewing experience with easy reading and navigation on different mobiles & tablets</h3><img src="<?php echo base_url();?>theme/slider/2 (2).png" class="heading42">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft" class="heading46">
<img src="<?php echo base_url();?>theme/slider/5.png" class="heading47"> We design custom build high impact site that attracts your target audience
</h3>
<h3 data-animation="animated bounceInLeft" class="heading48">
<img src="<?php echo base_url();?>theme/slider/5.png" class="heading49"> Ultra Responsive Design using HTML & CSS3
</h3>
<h3 data-animation="animated bounceInLeft" class="heading50">
<img src="<?php echo base_url();?>theme/slider/5.png" class="heading51"> 100% compatibility in all mobile devices and browsers
</h3>
<h3 data-animation="animated bounceInLeft" class="heading52">
<img src="<?php echo base_url();?>theme/slider/5.png" class="heading53"> We build scalable and smarter business solutions
</h3>
</div>
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->

Categories