Forum for discussing general topics related to Couch.
6 posts Page 1 of 1
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

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(); ?>
Hi,

Trimmed down, your code is essentially this -
Code: Select all
<cms:pages masterpage='carsale.php' custom_field="filter">

  <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 -->
    ..

    <!-- Left and right controls -->
    <a class="left carousel-control" href=".carousel" role="button" data-slide="prev">
       ..
    </a>
    <a class="right carousel-control" href=".carousel" role="button" data-slide="next">
        ..
    </a>
  </div>

</cms:pages>

Suppose <cms:pages> returns three pages, the code above will create three carousels.
That is fine but the problem is that all the three will have the *same* HTML IDs and classes (your navigation depends on a particular class name 'carousel') - this is what is confusing your JS navigation.

You should add something unique to the ID and relevant class names for each page so as to make the three carousels different entities. The variable 'k_page_id' would be perfect for this.

You may have to tweak somethings but the following should work -
Code: Select all
<cms:pages masterpage='carsale.php' custom_field="filter">

  <div id="myCarousel<cms:show k_page_id />" class="carousel<cms:show k_page_id /> slide" data-ride="carousel<cms:show k_page_id />" data-interval="false">       
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target=".carousel<cms:show k_page_id />" data-slide-to="<cms:show k_count />" <cms:if k_count='0'>class="active"</cms:if>></li> 
    </ol>

    <!-- Wrapper for slides -->
    ..

    <!-- Left and right controls -->
    <a class="left carousel-control" href=".carousel<cms:show k_page_id />" role="button" data-slide="prev">
       ..
    </a>
    <a class="right carousel-control" href=".carousel<cms:show k_page_id />" role="button" data-slide="next">
        ..
    </a>
  </div>

</cms:pages>

Hope this helps.
Thans KK. I have implemented the changes suggested, but now end up with one set of controls that sit at the top of the page, and when clicked I get a "not found" error like the one below:

The requested URL /.carousel261 was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
What I pointed out in my post was the problem why all your carousels were working as one (and its solution of making them unique).

You'll have to now see for yourself how your particular carousel script works (what it expects as classes, IDs etc.), the CSS/JS it requires and then try to modify your code to produce that particular markup/css/js.

I suggest you start like this -
forget the Couch tags part for now. Begin with a static (i.e. only HTML/CSS/JS) design that has at least three working carousels. Once you have that, start retrofitting Couch tags to it.

You have to begin with a working static design first. Let me know when you are able to produce that.
I understand. Let me work on this and will report final outcome here. Thanks
The problem has been solved. Thanks KK.

Apparently, I just needed to add the <cms:show k_page_id /> to the div id, li data-target and the two controls.
6 posts Page 1 of 1