Bootstrap for slider

Question

davy_yg 2 Posting Whiz

11 Years Ago

Hello,

This is the slider without bootstrap:

portfolio-filter3.php

<div class="slider-demo">
        <a href="#" id="previous">&laquo;</a>
        <div id="slider-inner">
            <ul>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>              
            </ul>
        </div>
        <a href="#" id="next">&raquo;</a>
</div>

Now this is the slider with bootstrap:

portfolio-filter.php

    <div class="row">
        <div class="slider-demo">
            <a href="#" id="previous">&laquo;</a>
            <div id="slider-inner">
                <ul>
                    <div class="col-sm-4"><li><img src="img/1.jpg" alt=""></li></div>
                    <div class="col-sm-4"><li><img src="img/2.jpg" alt=""></li></div>
                    <div class="col-sm-4"><li><img src="img/3.jpg" alt=""></li></div>                
                </ul>
            </div>
            <a href="#" id="next">&raquo;</a>
        </div>
        </div>

Yet, the appearance is not perfect yet. Can anyone help me fix the code to make it looks perfect?

html-css:bootstrap web-design

2 Contributors
8 Replies
238 Views
1 Day Discussion Span
Latest Post 11 Years Ago Latest Post by davy_yg

Dani AI

Generated 7 Months Ago

Two quick, concrete causes look responsible for the “not perfect” Bootstrap version of the grey client slider: invalid HTML structure (you wrapped <li> inside div.col-*) and conflicting script loads (two different jQuery includes on the same page). was right to ask which script — the slider plugin you use expects a UL > LI structure, and breaking that structure or reloading jQuery after plugins are attached will break layout and behavior.

Fixes you can apply immediately (in order of impact):

Correct the markup so li elements remain direct children of the ul, and apply Bootstrap column classes to the li (or wrap the image inside a block inside li). Example pattern:

<ul class="row" id="client-list" style="margin:0; padding:0; list-style:none;">
  <li class="col-sm-4 col-xs-12">
    <img src="Images/Portfolio/client1.jpg" class="img-responsive center-block" alt="">
  </li>
  <li class="col-sm-4 col-xs-12">...</li>
  <li class="col-sm-4 col-xs-12">...</li>
</ul>

Keep a single jQuery include and load it before all plugins (Isotope, slider, etc.). Remove the duplicate jQuery script tag so plugins aren’t reinitialized or detached by a second jQuery load.
Add small CSS resets and a responsive override so the slider stays horizontal on wide screens and stacks on small ones:

#slider-inner ul { margin:0; padding:0; list-style:none; }
#slider-inner ul li { margin:0; padding:0; }
@media (max-width:767px){
  #slider-inner ul li { width:100% !important; float:none; display:block; }
}

Use class="img-responsive" instead of fixed width="270px", and optimize image file sizes to fix the slow loading @Member#120589 noticed.

Cautions: Bootstrap’s .row expects its immediate children to be .col-*; if you don’t put .row on the UL you’ll see unexpected spacing. Also some slider plugins set inline widths on li — if the plugin fights your CSS, use plugin options (or a small resize callback) to reapply the responsive widths after init. These changes should restore the neat one-row desktop layout and make it stack vertically on small screens.

All 8 Replies

Member #120589

11 Years Ago

With respect - spit it out. What exactly is wrong with it in your opinion? E.g.

Mismatched nav levels?
Images take forever to load?

BTW yur site is very slow. ARe you loading loads of resources or are the images huage and you've shrunk them via tag properties?
Which script are you using for the slider?

Member #120589

11 Years Ago

I was hoping you'd give the url of the script so I could see what it's supposed to look like and which options are available for it. Nevermind. Good luck with it.

pritaeas commented: Optimist... +14

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davy_yg 2 Posting Whiz · Answer 1 · 2015-08-13T08:07:02+00:00

Ok, check the grey client slider. The one with bootstrap and without bootstrap.

My goal is to create grey client slider with bootstrap with a neat appearance. It suppose to be one row horizontal.

And if I turn the web browser smaller than I thought it suppose to shift into vertical.

Member #120589 · Answer 2 · 2015-08-13T09:33:02+00:00

Ok, again, what script are you using? Please read my question.

davy_yg 2 Posting Whiz · Answer 3 · 2015-08-14T06:14:41+00:00

javascript

Here is the whole script:

carousel-slides/index.html

<!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>jQuery Slim Slider Plugin Demo</title>
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>


    <div class="slider-demo">
        <a href="#" id="previous">&laquo;</a>
        <div id="slider-inner">
            <ul>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>               
            </ul>
        </div>
        <a href="#" id="next">&raquo;</a>
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/slider.jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            $('#slider-inner').slider('#previous', '#next');
        });
    </script>

    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? '' : '') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>

davy_yg 2 Posting Whiz · Answer 4 · 2015-08-14T08:51:30+00:00

This is the url of the script:

When you narrow down the browser the icons inside of the grey bar suppose to turn into vertical.

Just like the picture gallery.

Member #120589 · Answer 5 · 2015-08-14T09:06:59+00:00

Oh for goodness sakes davy - THE SITE FROM WHERE YOU GOT THE SCRIPT - not the page where you've pasted it! Leaving you to it. Was being too optimistic after all.

davy_yg 2 Posting Whiz · Answer 6 · 2015-08-14T16:30:34+00:00

Hello,

Sorry, I am taking the carousel part off in another page. Here is the whole script for portfolio-filter3.php

portfolio-filter3.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>

   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/carouselstyles.css">
   <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">



</head>


<body>

<?php include('nav.php'); ?>

<br><br><br>

   <center><h2><b>Our Portfolio</b></h2></center>

   <p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
   </p>

   <div id="filters" class="button-group">
      <button class="btn" data-filter="*">All</button>
      <button class="btn" data-filter=".yellow">Yellow</button>
      <button class="btn" data-filter=".red">Red</button>
      <button class="btn" data-filter=".grey">Grey</button>
      <button class="btn" data-filter=".classy">Classy</button>
    </div>

    <br><br>

    <div id="box">
       <div class="grey" data-category="transition" data-name="classy6">
       <img class="name" src="Images/Portfolio/portfolio1.jpg" width="270px">    
    </div>

    <div class="red" data-category="metalloid" data-name="classy5">
       <img class="name" src="Images/Portfolio/portfolio2.jpg" width="270px">   
    </div>
    <div class="yellow" data-category="metalloid2" data-name="classy4">
       <img class="name" src="Images/Portfolio/portfolio3.jpg" width="270px">   
    </div>
    <div class="classy" data-category="metalloid3" data-name="classy3">  
       <img class="name" src="Images/Portfolio/portfolio4.jpg" width="270px">
    </div>   
    <div class="yellow" data-category="metalloid4" data-name="classy2">
       <img class="name" src="Images/Portfolio/portfolio5.jpg" width="270px">   
    </div>
    <div class="grey" data-category="metalloid5" data-name="classy1">    
       <img class="name" src="Images/Portfolio/portfolio6.jpg" width="270px">
    </div>   
    </div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  /*var $grid = $grid.isotope({*/
  var $container = $('#box').isotope({ 
    getSortData: {
      name: '[data-name]',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>

<!-- filter -->

<script>

// init Isotope
var $container = $('#box').isotope({
  // options
});
// filter items on button click
$('#filters').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

</script>

<script>

$container.isotope({ filter: '.yellow' });
$container.isotope({ filter: '.red' });
$container.isotope({ filter: '.grey' });
$container.isotope({ filter: '.classy' });
$container.isotope({ filter: '*' });

</script>

<!-- end filter -->

<br><br><br><br>
<!--
<div id="greybar">

   <div class="row">

   <div class="col-sm-4 col-xs-12"><div id="clients"><center><img src="Images/Portfolio/client1.jpg"></center></div></div>
   <div class="col-sm-4 col-xs-12"><div id="clients"><center><img src="Images/Portfolio/client2.jpg"></center></div></div>
   <div class="col-sm-4 col-xs-12"><div id="clients"><center><img src="Images/Portfolio/client3.jpg"></center></div></div>

   <div class="col-sm-12 col-xs-12">

   <br><br><br><br><br><br>

   <div align="center">
    Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>

   <b>dolore magna aliquam</b><br><br>
    </div>

   </div>

   </div>

</div>
-->


    <div class="slider-demo">
        <a href="#" id="previous">&laquo;</a>
        <div id="slider-inner">
            <ul>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>              
            </ul>
        </div>
        <a href="#" id="next">&raquo;</a>
    </div>




<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slider.jquery.js"></script>

<script type="text/javascript">
    $(function() {
        $('#slider-inner').slider('#previous', '#next');
    });
</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? '' : '') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>


<?php include('footer.php'); ?>



</body>

</html>

Bootstrap for slider

Dani AI

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers