I am looking to have a slider similar to this with the thumbnails on the right had side displayed as a slider

http://wowslider.com/jquery-image-scroller-prime-time-linear-demo.html

Any ideas how I can achieve this?

Recommended Answers

All 2 Replies

Use JQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
      $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 10000, true);
  });
</script>

<style>
#featured{
    width:450px;
    padding-right:120px;
    position:relative;
    height:350px;
    background:#fff;
}

#featured ul.ui-tabs-nav{
    position:absolute;
    top:0px;
    left:454px;
    list-style: none;
    margin:0;
    width:114px;
    height: 261px;
    padding: 0;
}

#featured ul.ui-tabs-nav li{
    padding-left:10px;
    font-size:12px;
    color:#666;
    padding-top: 1px;
    padding-right: 0;
    padding-bottom: 1px;
    margin-bottom: 1px;
}

#featured ul.ui-tabs-nav li img{
    float:left;
    background:#fff;
    margin: 1px;
    padding: 2px;
    border: 1px solid #CCC;
}

#featured ul.ui-tabs-nav li span{ 
    font-size:11px; font-family:Verdana; 
    line-height:18px; 
}

#featured li.ui-tabs-nav-item a{
    display:block;
    height:62px;
    color:#CCC;
    line-height:20px;
    background-color: #FFFFFF;
}

#featured li.ui-tabs-nav-item a:hover{
    background-color: #247CD5;
}

#featured li.ui-tabs-selected{
    background-image: url(../img/selected-item.png);
    background-repeat: no-repeat;
    background-position: left top;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background-color: #195695;
}

#featured .ui-tabs-panel{
    width:450px;
    height:350px;
    background:#fff;
    position:relative;
}

#featured .ui-tabs-panel img{
    border: 1px solid #CCC;
}

#featured .ui-tabs-panel .info{
    position:absolute;
    top:263px;
    left:1px;
    height:86px;
    width: 566px;
    padding-right: 2px;
    padding-bottom: 2px;
}

#featured .info h2{
    font-size:16px;
    font-family:Tahoma, Geneva, sans-serif;
    color:#333;
    padding:5px;
    margin:0;
    overflow:hidden;
}

#featured .info p{
    margin:0 5px;
    font-family:Verdana;
    font-size:11px;
    line-height:15px;
    color:#000033;
}

#featured .info p a{
    color: #F3981E;
}

#featured .info a{
    text-decoration:none;
    color:#195695;
}

#featured .info a:hover{ 
    text-decoration:underline; 
}

#featured .ui-tabs-hide{ 
    display:none; 
}

.lh20 {line-height: 20px;}
</style>

</head>
<body>

<div id="featured">

  <ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSI03OjfQ-OVlBOfwp7oV4tl8eoI6QkD9biegseHd7eZzvyZUzb" alt="" width="96" height="54" /></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSAt-Bf8Ma8ItU-Mn_0RCdqlM_27tM-ikLpxwO3MDpmO_dkrgTHUw" alt="" width="96" height="54" /></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRFUBvlXb4sR-QsCgEZNmhjzvtySUBty7hVOpf7FKQME2NB1yL0" alt="" width="96" height="54" /></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTKAybztGOepLP9MZhve9J4GY0NeX06dwSmcS-XMYZjO-LTm21p" alt="" width="96" height="54" /></a></li>
  </ul>

<!-- First Content -->
  <div id="fragment-1" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://www.stratpost.com/wp-content/uploads/2011/05/mv2-450-x-255.jpg" width="450" height="255" alt="" />
    <div class="info" >
      <h2 class="lh20 strong"><a href="#" target="_blank">Lorem ipsum dolor</a></h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis est ut tortor semper tempor vel quis sem. Proin ullamcorper sem ullamcorper molestie eleifend.   
 <a href="#" target="_blank"> Read More...</a></p>
    </div>
  </div>

<!-- Second Content -->
  <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://blog.iso50.com/wp-content/uploads/2011/03/Picture-4-450x255.png" width="450" height="255" alt="" />
    <div class="info" >
      <h2 class="lh20 strong"><a href="#" target="_blank">Lorem ipsum dolor</a></h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis est ut tortor semper tempor vel quis sem. Proin ullamcorper sem ullamcorper molestie eleifend.    
 <a href="#" target="_blank"> Read More...</a></p>
    </div>
  </div>

<!-- Third Content -->
  <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://www.stratpost.com/wp-content/uploads/2010/10/Panther-UAV-450-x-255.jpg" width="450" height="255" alt="" />
    <div class="info" >
      <h2 class="lh20 strong"><a href="#" target="_blank">Chili Cook-off</a></h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis est ut tortor semper tempor vel quis sem. Proin ullamcorper sem ullamcorper molestie eleifend. 
 <a href="#" target="_blank"> Read More...</a></p>
    </div>
  </div>

<!-- Fourth Content -->
  <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://doubleaardvarkmedia.com/wp-content/uploads/2012/11/mk_logo21-450-x-255.jpg" width="450" height="255" alt="" />
    <div class="info" >
      <h2 class="lh20 strong"><a href="#" target="_blank">Lorem ipsum dolor</a></h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis est ut tortor semper tempor vel quis sem. Proin ullamcorper sem ullamcorper molestie eleifend.  
 <a href="#" target="_blank"> Read More...</a></p>
    </div>
  </div>

</div>
<!-- /End featured -->

</body>
</html>

rad, you're the best!

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.