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 -->
Related
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!
I'm trying to make a slider and it works perfectly when 3 images are uploaded in the backend. It doesn't work when there are fewer.
The slider is a standard Bootstrap slider as seen here
The "the_field('afbeelding')" is from Advanced custom fields WP plugin as seen here
In the WP backend a user can upload an image, the_field('afbeelding') will print the url to the image.
For example, if there are only 2 images then it should only show 2 slides.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" >
<div class="item active">
<img src="<?php the_field('afbeelding')?>" alt="<?php the_title() ?>">
</div>
<div class="item">
<img src="<?php the_field('afbeelding_2');?>" alt="">
</div>
<div class="item">
<img src="<?php the_field('afbeelding_3');?>" alt="">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
I tried to fix it by changing each item to this:
<?php if(isset(the_field('afbeelding_2'))){?>
<div class="item">
<img src="<?php the_field('afbeelding_2');?>" alt="">
</div>
<?php } ?>
But it didn't work...
Help would be very much appreciated!
you was almost there if you check the reference code for the advanced custom fields which you are using you will find out that if you want to check if the value exists for that field you need to use get_field() functions.
I didn't work before with this plugin but i believe the_field() is always returning true that's why you need to get_field() which return either true if the value exists or false if not and in this case your condition will work as expected .
<?php
if (get_field('afbeelding_2')) { ?>
<div class="item">
<img src="<?php the_field('afbeelding_2');?>" alt="">
</div>
<?php }?>
Reference
Please help. when i use the default carousel,
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
slide does work, but when i while looped the
<div class="item active">...</div> so the images will be dynamic, it doesnt slide anymore. instead, the images just stacked each other as seen here:
image here
Here is my code:
<!-- carousel -->
<div id="myCarousel" class="carousel slide " data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$x = new DB();
$y= $x->selectWithCount(0,'tblimagecarousel',null,null);
// var_dump($y);
$numofimages = $y->fetchColumn();
// echo $numofimages;
for($x=0;$x<$numofimages;$x++)
{
echo "<li data-target='#myCarousel' data-slide-to='{$x}'></li>";
}
?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$x = new DB();
$y= $x->select(0,'*','tblimagecarousel',null,null);
while($row = $y->fetchObject()){
echo"
<div class='item active'>
<img src='../assets/images/".$row->img."' alt='".$row->title."' width='100%' height='345'>
<div class='carousel-caption'>
<h3>".$row->title."</h3>
<p>".$row->description."</p>
</div>
</div>";
}
?>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" >
<span><img src="../assets/images/ico_prev.png" height="50px" style="margin-top:500%"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span><img src="../assets/images/ico_next.png" height="50px" style="margin-top:500%"></span>
<span class="sr-only">Next</span>
</a>
</div>
I looked at your code your issue is in your loop
the carousel can only have ONE item with the active class at a time (if you only want one to show)
this does not contain the php portion you will have to construct your loop to NOT add the active class (possibly add the active class to the 1st item after)
HTML
<div class="item">
<img src="../assets/images/image1.png" alt="Image one" width="100%" height="345">
<div class="carousel-caption">
<h3>Image one</h3>
<p>Image Description 1</p>
</div>
</div>
<div class="item">
<img src="../assets/images/image2.png" alt="Image two" width="100%" height="345">
<div class="carousel-caption">
<h3>Image two</h3>
<p>Image Description 2</p>
</div>
</div>
<div class="item">
<img src="../assets/images/image3.png" alt="Image three" width="100%" height="345">
<div class="carousel-caption">
<h3>Image three</h3>
<p>Image Description 3</p>
</div>
</div>
<div class="item">
<img src="../assets/images/image4.png" alt="Image four" width="100%" height="345">
<div class="carousel-caption">
<h3>Image four</h3>
<p>Image Description 4</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span><img src="../assets/images/ico_prev.png" height="50px" ></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span><img src="../assets/images/ico_next.png" height="50px" ></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS
body{background-color:#ccc;}
.item{height:400px;}
js
$(document).ready(function(){
$('#myCarousel').carousel();
//this will add the active class to the first item
$('.carousel-inner div.item:first-of-type' ).addClass( "active" );
})
You can view a fiddle HERE
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've tried following the links below but to no avail, it still somehow doesn't slide.
Trying to add carousel to webpage without redirecting
I've also tried updating my jQuery as said here.
Bootstrap Carousel Slider not working
Here's what I've been working on.
<!-- Carousel -->
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 3000
})
});
</script>
<div style="width:60%;
margin-left:20%;
margin-right:20%;
">
<h1>Welcome to the GlassEngine Company Homepage</h1>
</div>
<div style="width:60%;
margin-left:45%;
margin-right:20%;
">
<h3>Enjoy your stay!</h3>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" align="center">
<!-- 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>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="<?php echo base_url() ?>/images/fslide01.jpg" alt="...">
<div class="carousel-caption">
<h3>Leaves</h3>
</div>
</div>
<div class="item">
<img src="<?php echo base_url() ?>/images/fslide02.jpg" alt="...">
<div class="carousel-caption">
Awesome Statue
</div>
</div>
<div class="item">
<img src="<?php echo base_url() ?>/images/fslide03.jpg" alt="...">
<div class="carousel-caption">
Horse
</div>
</div>
<div class="item">
<img src="<?php echo base_url() ?>/images/fslide04.jpg" alt="...">
<div class="carousel-caption">
Scenery
</div>
</div>
<div class="item">
<img src="<?php echo base_url() ?>/images/fslide05.jpg" alt="...">
<div class="carousel-caption">
Animals
</div>
</div>
</div>
<!-- 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>
I also have the following code in my <head> tag
<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>/js/bootstrap.min.js"></script>
<script src="<?php echo base_url() ?>/js/jquery-2.1.4.min.js"> </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?php echo base_url() ?>/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="<?php echo base_url() ?>/css/bootstrap-theme.min.css">
I have also tried removing the / after the echo, but still no different.
<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>js/bootstrap.min.js"></script>
<script src="<?php echo base_url() ?>js/jquery-2.1.4.min.js"> </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?php echo base_url() ?>css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="<?php echo base_url() ?>css/bootstrap-theme.min.css">
So it turns out I was loading bootstrap before jquery. So the proper code would be this:
<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>/js/jquery-2.1.4.min.js"> </script>
<script src="<?php echo base_url() ?>/js/bootstrap.min.js"></script>
Case Closed.
I have a thumbnail slider on index page
<div class="productslider carousel slide data-slider" id="prod158">
<div class="carousel-inner">
<div class="item active">
<ul>
<li class="product col-sm-2">
<a href="#" alt="">
<img src="#" width="160" height="120" alt="loading">
<span>Title</span>
</a>
<span class="text">Price</span>
</li>
</ul>
</div>
<a data-slide="prev" href="#prod158" class="left carousel-control">
<span class="prev_btn"></span>
</a>
<a data-slide="next" href="#prod158" class="right carousel-control">
<span class="next_btn"></span>
</a>
</div>
So how do I load dynamic data on this slider (where & how i pleased foreach loop).
Note :
This is a laravel project.if you use blade syntax,then i will more helpful.
li should be looped five times.
if there is 10 products then item class should be looped 2 times.
Data Source : Product::all();
<div class="productslider carousel slide data-slider" id="prod158">
<div class="carousel-inner">
#foreach(array_chunk($products,5) as $row)
<div class="item active">
<ul>
#foreach($row as $product)
<li class="product col-sm-2">
<a href="#" alt="">
<img src="#" width="160" height="120" alt="loading">
<span>Title</span>
</a>
<span class="text">Price</span>
</li>
#endforeach
</ul>
</div>
#endforeach
<a data-slide="prev" href="#prod158" class="left carousel-control">
<span class="prev_btn"></span></a>
<a data-slide="next" href="#prod158" class="right carousel-control">
<span class="next_btn"></span></a>