Description :- In this lesson I’m gonna provide the code from which you guys can easily make fully Dynamic Carousel Silder from which you’ll fetch image name from database and images from your img folder.
Establishing Database:-
Now, I know that you all guys know how to create new database and name it slider after this create new table and name it images and make 2 rows
(i) id
(ii) img
And then insert your image name with extension into the img row .
Now follow some simple steps for setting up everything which we need for this lesson:-
1. Download the bootstrap
2. Download jquery file from jquery.com
2. Create a new folder and rename it as img and put some images in it.
3. Create a new folder and rename it as css and make app.css in the css folder
4. Create an index.php file
5. Create config.php file (the connection file to our database)
1. config.php (the connection file)
<?php $con = mysqli_connect("localhost","root","","slider"); if(mysqli_errno($con)) { echo mysqli_error(); } ?>
2. index.php (the file where your silder code lives with some jquery lines)
There are some problems with wordpress text editor so I’m providing pdf of index.php copy from pdf and make index.php
Copy code from this link
3. app.css (lives in css folder)
.
a.carousel-control { opacity: 1; height: inherit; width: inherit; background: none; text-shadow: none; } .prevSlide { color: #f5f5f5; font-size: 2em; position: absolute; top: 50%; left: 0; background-color:rgba(0,0,0,0.5); transform: translate(0,-50%); padding: 0 10px; } .prevSlide:hover { color:rgba(247,148,30,1); background-color:rgba(0,0,0,0.8); } .nextSlide { color: #f5f5f5; font-size: 2em; position: absolute; top: 50%; right: 0; background-color:rgba(0,0,0,0.5); transform: translate(0,-50%); padding: 0 10px; } .nextSlide:hover { color:rgba(247,148,30,1); background-color:rgba(0,0,0,0.8); }
*Note:- My final product screenshot is this except the images in the slider you will get the same result.
Thanks 🙂
hello i don’t understand what you mean by insert your image name with image extension into the image row and besides it it column or row
LikeLike
Image name and image extension like one.jpg and I was talking about the img row of you database. So you have to insert the image name with the extension into the the img row of your database.
LikeLike
kindly explain this your first statement clearly…. how i did add the image to my database. thanks
“Establishing Database:-
Now, I know that you all guys know how to create new database and name it slider after this create new table and name it images and make 2 rows
(i) id
(ii) img
And then insert your image name with extension into the img row .
“
LikeLike
Thanks i have found solution in your code you need to remove the img/ from this line of index code <img src=" img/” class=”imgresponsive”
alt=””/>
I hope it will solve other users challenges thanks i really appreciate your effort
LikeLike
Hi! Actually I wrote Because my all images are in the folder called “img”.
Well I’m happy that you finally solved this by your own 🙂
LikeLike
Thanks I exactly Need this solution for My Website.
Thanks For Share It was very Helpful to Me. 🙂
LikeLiked by 1 person
not working sir ji
imgs are showing but slide is not working why sir ji
LikeLike
If images are showing and slider is not working then the problem is in your JS code. Please review it once again. 🙂
LikeLike
not working sir ji
imgs are showing but only slide is not working why sir ji
LikeLike
Have you linked up jQuery file and bootstrap js file correctly ?
LikeLike
slider is not moving automatically
LikeLike
Add this code in your javascript file.
$(‘#mycarousel’).carousel({
interval: 3000,
cycle: true
});
LikeLike
thanx a lot. ur code works just like rockzzzzzzzzzzzzzzz……………………………
thanx friend..
LikeLike
Hey,how can we make this slider an auto playing one ? 🙂
LikeLike
Just add this code in your javascript file. And it will start sliding automatically in every 3 seconds.
$(‘#mycarousel’).carousel({
interval: 3000,
cycle: true
});
LikeLike
without bootstrap can i do this code?
LikeLike
sorry!! without bootstrap can i implement this code or not?
LikeLike
Yes you can, I’ve used bootstrap because I need bootstrap slider. You may use other plugins like owl or slick slider.
LikeLike
Yes, you can definitely use this code without bootstrap. There are so many slider out there on internet. Most common and famous are Owl slider and Slick slider.
LikeLike
Where can i find this
class=”fa fa-angle-left prevSlide” and different other classes in index.php
LikeLike
Here https://webtechball.files.wordpress.com/2015/10/index.pdf
LikeLike
hello sir my slider is not moving i have fetch the images from the database but it is static
LikeLike
Have you linked up jquery file and bootstrap file correctly ?
LikeLike
hello sir, where can i download the bootstrap/js/jquery.js? i can’t seem to find it 😦 and my slider is not working. thank you!
LikeLike
jQuery :- https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js
Bootstrap:- https://getbootstrap.com/
Once include these files in the right direction your slider will start working.
LikeLike