Hi all,
I am running a site on which a filtered search outputs several carousels on one page. Everything works fine, except the carousel controllers, which move all carousels on the page, but I would like each carousel to move left or right independently. I am at the end of my rope and hope to get some help on this. Regards,Brian
I am running a site on which a filtered search outputs several carousels on one page. Everything works fine, except the carousel controllers, which move all carousels on the page, but I would like each carousel to move left or right independently. I am at the end of my rope and hope to get some help on this. Regards,Brian
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<html>
<meta name="description" content="Buy Car and Motorcycle Spareparts Online-Kenya">
<link rel="icon" type="image/x-icon" href="/images/favicon.png" />
<link rel="icon" type="image/x-icon" href="http://myspareparts.co.ke/images/favicon.png" />
<title>
TYT - Toyota Cars Only </title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body style="margin: 0; padding: 0;" class="body">
<!--header-->
<table width="100%">
<tr id="top_banner" width="100%">
<td id="toyota_logo" width="100%"> <img src="/images/toyotaheader2.jpg" width="100%"/>
</td> </tr> </table>
<table width="100%">
<tr id="basket" width="100%" bgcolor="#FF0000">
<td style="padding:10px 0 0 10px; color:#fff; font-weight: regular; line-height: 25px; font-size:12px; font-family: Helvetica, Arial,sans-serif; margin: 0; ">
<p> <b><u><a href="carsale.php" style="padding:10px 0 0 10px; color:#fff; font-weight: regular; line-height: 25px; font-size:12px; font-family: Helvetica, Arial,sans-serif; margin: 0; ">SELL YOUR CAR</a></u> </b> </p>
</td> </tr> </table>
<table width="100%">
<tr id="toyota_list" width="100%" bgcolor=" #ffcccc"> <td style="padding:25px 0 0 30px; color:#000000; font-weight: regular; line-height: 25px; font-size:12px; font-family: Helvetica, Arial,sans-serif; margin: 0; ">
<cms:form id="filter" method="post" anchor='0' action="/toyotamobile.php" >
<cms:if k_success>
<!--build the filter-->
<cms:if frm_carmodel != '-' >
<cms:set filter="<cms:concat filter 'carmodel=' frm_carmodel />" scope='global'/>
</cms:if>
<cms:if frm_caryear != '-' >
<cms:set filter="<cms:concat filter ' | caryear=' frm_caryear />" scope='global'/>
</cms:if>
</cms:if>
<!--the filter form-->
Car Model... <cms:input type="dropdown" name="carmodel"
opt_values='Select Model=- | Allex |Allion | Alphard |Auris | Avensis | Axio | Belta | Caldina | Cami | Camry | Carib | Carina | Celica | Corolla | Corona | Corsa | Crown | Duet | Dyna | Estima | Fielder | FJ Cruiser | Fortuner | Fun Cargo | Grand Hiace | Harrier | HiAce | Hilux | Ipsum | ISIS | IST | Kluger | Land Cruiser | Land Cruiser Prado | Lite Ace | Mark II | Mark X | MR-S | Noah |Opa | Passo| Platz| Premio | Prius| Probox | Ractis | Raum | Rav 4 | Regius Van | Run X | Rush | Sienna | Sienta | Spacio | Sprinter | Starlet | Succeed | Surf | Townace | Vanguard | Vista | Vitz | Voxy | Wish'/> <br>
Car Year(s)... <cms:input type="checkbox" name="caryear"
opt_values=' 2000 | 2001 | 2002 | 2003 | 2004 | 2005 | 2006 | 2007 | 2008 | 2009 | 2010 | 2011 | 2012 | 2013 | 2014 | 2015 | 2016 | 2017 | 2018 '/>
<br>
<cms:input name="submit" type="submit" value="Search" />
<br><br>
</cms:form>
</td></tr>
</table>
<cms:pages masterpage='carsale.php' custom_field="<cms:show filter />">
<table width="100%">
<tr style="background-color:#E0E0E0" class="mainlisting"><br>
<td width="100%" style="padding:0 10px 0 10px">
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target=".carousel" data-slide-to="<cms:show k_count />" <cms:if k_count='0'>class="active"</cms:if>></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" width="100%">
<cms:show_repeatable 'slides' >
<cms:if k_count=='1'>
<div class="item active">
<cms:else />
<div class="item">
</cms:if>
<img src="<cms:show myimages />" alt="<cms:show carmodel />" width="100%" >
</div> </cms:show_repeatable>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href=".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=".carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <br>
<p style="color:#333333; font-weight: regular; line-height: 15px; font-size:12px;font-family: Helvetica, Arial,sans-serif; margin: 0; ">
<b>Toyota <cms:show carmodel /> </b> | <cms:show car_reg /> | <cms:show caryear /> Model | Mileage:<cms:show mileage /> | <cms:show color /> Color | <cms:show location />
</p><br>
<p style="color:#333333; font-weight: regular; line-height: 15px; font-size:12px;font-family: Helvetica, Arial,sans-serif; margin: 0; ">
<b>Price:</b> KSh <cms:show car_price /> <br> <b>Seller's Phone: </b><u><cms:show sellers_phone /></u> <br><br>
</p>
<br>
</td>
</tr>
</table>
</cms:pages>
<!--footer-->
<table cellpadding="0" cellspacing="0" border="0" style="color: #000; font: normal 11px Courier, 'Monaco', monospace; margin: 0; padding: 0;" width="100%">
<tr>
<hr>
<td style="font-size: 10px;font-weight: bold; line-height: 15px; color:#000; margin: 0; padding: 0 0 0 20px;font-family: 'Monaco', monospace;- font-style: normal; word-spacing: 1px;">
Copyright 2018
</td>
</tr>
</table>
<!--footer-->
</body>
</html>
<?php COUCH::invoke(); ?>