CODEWITHSUNDEEP
jqueryslideshow
Qwerty
Qwerty

Reputation: 15

Imageslider with Title and content

I'm trying to find a tutorial of a imageslider that displays an image, title and content, because i want a slider to display all the articles i have saved in my database. It's hard to find a tutorial that contains all three. All the examples i can find will only display text that in the written <-img-> src title attribute. 

<img src="Slider/img/Image1_bum_rgb.jpg" alt="" title="<%#Eval("JobTitle") %>" />

Does anyone know of an example, tutorial or something that can point me in the right direction? Would be really grateful for any help whatsoever

Upvotes: 1

Views: 114

Answers (2)

Dannn
Dannn

Reputation: 316

Bootstrap has a pretty good carousel that I have used on multiple sites now. Everything is customizable i.e. placement of the carousel caption etc. Only down fall is when on a mobile device, the caption will hide most of the image, so customizing it is necessary (see code at the bottom). Here is the code taking from this source: bootstrap carousel

<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>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div><!-- /.carousel -->

Code for modifying the carousel when on a mobile device (CSS):

.carousel-caption .btn{margin-bottom: 10px;}
.carousel-caption { bottom:-213px; margin: -25px; position: relative; background-color:rgba(0,0,0,0);}
.carousel-inner { padding-bottom:205px;}
#myCarousel{margin-bottom: 250px; height:200px;}
#myCarousel img{height: 200px; background:none;}
#myCarousel h2 {padding: 10px;}

Obviously, the values will be different depending on the size of the image you choose.

I hope this helps,

regards,

Dan

Upvotes: 1

don magug
don magug

Reputation: 322

Best things I know is to use bootstrap. Everything is ON inside it, including slide and animation. from this example, no need too much coding. grab all js and css of bootstrap and copy to your directory to ensure everything runs well then link them into your web page which contains the slide.

Take a look at this sample.

<link rel="stylesheet" href="http://www.appacyber.net/bootstrap.min.css"/>
                <div class="row carousel-holder">
                    <div class="col-md-12">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <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>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <h4>Lesson 1</h4>
                                    <img class="slide-image" src="http://www.appacyber.net/_img/software.png" alt=""/>
                                        <h6>Wow I: This is a right place to display your text or article</h6>
                                </div>
                                <div class="item">
                                    <h4>Lesson 1</h4>
                                    <img class="slide-image" src="http://www.appacyber.net/_img/hosting.png" alt=""/>
                                    <h6>Wow II: This is a right place to display your text or article</h6>
                                </div>
                                <div class="item">
                                    <h4>Lesson 3</h4>
                                    <img class="slide-image" src="http://www.appacyber.net/_img/elektronika.png" alt=""/>
                                       <h6>Wow III: This is a right place to display your text or article</h6>
                                </div>
                            </div>
                                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left"></span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right"></span>
                                </a>
                        </div>
                    </div>
                </div>
<script src="http://www.appacyber.net/jquery.min.js"></script>
<script src="http://www.appacyber.net/bootstrap.min.js"></script>

check this link

Upvotes: 0

Related Questions