how i can do an image slideshow

by

I have this code which works which is dynamic slider takes dynamic images and inserts into slider.

<div class="item <?php if($i==1) echo "active"; ?>"> //specifies image active

This above code specifies that 1st image must be active.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Dynamic Slider</title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://use.fontawesome.com/0f773d63b5.js"></script>

    <style>
    /*SLIDER CSS*/
     /* Main carousel style */
    .carousel {
        width: 100%;

    }

    /* Indicators list style */
    .article-slide .carousel-indicators {
        bottom: 0;
        left: 0;
        margin-left: 5px;
        width: 100%;
    }
    /* Indicators list style */
    .article-slide .carousel-indicators li {
        border: medium none;
        border-radius: 0;
        float: left;
        height: 54px;
        margin-bottom: 5px;
        margin-left: 0;
        margin-right: 5px !important;
        margin-top: 0;
        width: 100px; /*here will be the size of */
    }
    /* Indicators images style */
    .article-slide .carousel-indicators img {
        border: 2px solid #FFFFFF;
        float: left;
        height: 54px;
        left: 0;
        width: 100px;
    }
    /* Indicators active image style */
    .article-slide .carousel-indicators .active img {
        border: 2px solid #428BCA;
        opacity: 0.7;
    }
    </style>


    <script type="text/javascript">
        // SLIDER JQUERY
        $('.carousel').carousel({
          interval: false
        });
    </script>

</head>
<body>
    <!--SECTION ABOUT PLACE-->
    <section class="container-fluid">
        <div class="carousel slide article-slide carousel_size " id="article-photo-carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <?php
                //ESATBLISH CONNECTION
                $host = "localhost";
                $username_db = "USERNAME";
                $password_db = "PASSWORD";
                $databaseName = "DATABASE";

                 $link = new mysqli ($host, $username_db, $password_db, $databaseName); 

                //check connection
                if($link->connect_error){
                    die ("connection failed : ".$link->connect_error);
                }

                //DISPLAY IMAGESIN SIDE SLIDER
                $id = $_GET['profileId'];

                $img_sql = "SELECT * FROM gallery WHERE profileId='$id' LIMIT 5";
                $img_res =$link->query($img_sql);

                if($img_res){
                $i=0;
                    while($row=$img_res->fetch_assoc()){
                    $i++;
                    ?>
                        <div class="item <?php if($i==1) echo "active"; ?>">
                        <img alt="" title="" src="admin/uploads/<?php echo $row['image'];?>">
                        </div>
                    <?php
                    }
                }
                ?>

            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#article-photo-carousel" 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="#article-photo-carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>  
    </section>      

</body>
</html>

More Related Contents:

  1. I want to use jquery nested sortable plugin with drag and drop in codeigniter using mysqli
  2. Can anyone help me what is wrong in this code ajax using with php? [closed]
  3. Prevent duplicate submission with post in jquery [closed]
  4. Form inside of $.load not posting correctly
  5. How to access PHP variables in JavaScript or jQuery rather than [duplicate]
  6. Simple jQuery, PHP and JSONP example?
  7. Update data on a page without refreshing
  8. How do I PHP-unserialize a jQuery-serialized form?
  9. CORS not working php
  10. PHP returning JSON to JQUERY AJAX CALL
  11. How to execute ajax function onbeforeunload?
  12. Send multiple checkbox data to PHP via jQuery ajax()
  13. Update fee dynamically based on radio buttons in Woocommerce checkout
  14. jQuery Mobile: How to correctly submit form data
  15. jQuery $.ajax request of dataType json will not retrieve data from PHP script
  16. Show/hide fields depending on select value
  17. Get variable from PHP file using JQuery/AJAX
  18. Using AJAX to pass variable to PHP and retrieve those using AJAX again
  19. How to pass an array using PHP & Ajax to Javascript?
  20. How to add anchor tag to a URL from text input
  21. Multiple javascript/css files: best practices?
  22. How to get exact browser name and version?
  23. Removing black borders 4:3 on youtube thumbnails
  24. How to show ajax loading gif animation while the page is loading?
  25. Use a PHP variable in JQuery
  26. jQuery Multiple Forms Submit
  27. passing php string with multiple lines to a javascript function/variable
  28. Add a quantity field to Ajax add to cart button on WooCommerce shop page
  29. Get the last modified date of a remote file
  30. jQuery Mobile: Sending data from one page to the another

Leave a Comment