Search the Community

I've implemented Slick sliders on WordPress sites many times, but I've never had this error before. The site is here. The template code I'm using is: <link rel="stylesheet" type="text/css" href="/site/templates/scripts/slick/slick.css"/> <script type="text/javascript" src="/site/templates/scripts/slick/slick.js"></script> <?php // if (count($page->home_header_image) > 0): ?> <div class="home-featured-image slick-carousel"> <?php foreach($page->home_header_image as $image): ?> <div class="slide"><img src="<?php echo $image->size(1280,420)->url; ?>"></div> <?php endforeach ?> </div> <?php // endif ?> <script> (function($) { $('.slick-carousel').slick(); })( jQuery ); </script> The JS error I'm getting is: TypeError: $.proxy is not a function. (In '$.proxy(_.autoPlay, _)', '$.proxy' is undefined) As you can see, I tried wrapping the JS call in noconflict, but that doesn't help. What am I missing?

I have an image and video carousel that I want to use on a page and have it be editable via processwire. The problem is that the code for images and video is completely different. What is the best way to go about making one repeater field where you can pick either a video or image? I thought about having nested repeaters but not sure if that would work. I want it to be possible to order the slides so having them as separate repeaters wouldn't work either. I am a bit stumped. Any help would be great. Images: <div class="rsContent"> <img class="rsImg" src="abc.jpg" alt=""> <div class="infoBlock infoBlockLeftBlack"> <h1>...</h1> <h3>...</h3> <h4>...</h4> <p>....</p> etc etc </div> </div> and for video is this: <div class="rsContent"> <a class="rsImg" href="abc.jpg" data-rsVideo="https://www.youtube.com/"></a> </div> Thanks you

i am trying to create a product carousel in PW from last few days but can't figure out what i am doing wrong. here is HTML of carousel which is working fine. <div class="box producttabs"> <div class="tab-nav"> <ul id="producttabs304244223" class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#tab-latest304244223">First Tab</a></li> <li><a data-toggle="tab" href="#tab-featured304244223">Second Tab</a></li> </ul> </div> <div class="tab-content"> <div id="tab-latest304244223" class="tab-pane box-products tabcarousel304244223 slide active"> <div class=""> <a data-slide="prev" href="#tab-latest304244223" class="carousel-control left">‹</a> <a data-slide="next" href="#tab-latest304244223" class="carousel-control right">›</a> </div> <div class="carousel-inner "> <!-- repeat --> <div class="item active"> <div class="row-fluid box-product"> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-4.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-5.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-6.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-7.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> </div> </div> <!-- repeat --> </div> </div> <!-- end of tab --> <div id="tab-featured304244223" class="tab-pane box-products tabcarousel304244223 slide"> <div class=""> <a data-slide="prev" href="#tab-featured304244223" class="carousel-control left">‹</a> <a data-slide="next" href="#tab-featured304244223" class="carousel-control right">›</a> </div> <div class="carousel-inner "> <div class="item active"> <div class="row-fluid box-product"> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-8.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-1.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-2.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-3.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> </div> </div> <div class="item "> <div class="row-fluid box-product"> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-5.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-6.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-7.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-8.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> if you see in above HTML code there is two tabs and product carousel. one thing important is each 4 items are inclose in <div class="item"> and first div of tab will be <div class="item active"> i am using bellow code in PW but output is coming wrong and page disturb <div class="tab-content"> <div id="tab-latest304244223" class="tab-pane box-products tabcarousel304244223 slide active"> <?php $children=$pages->find("template=product,product_cat=1014,show_main>0"); if($children->getTotal() >0){ ?> <div class=""> <a data-slide="prev" href="#tab-latest304244223" class="carousel-control left">‹</a> <a data-slide="next" href="#tab-latest304244223" class="carousel-control right">›</a> </div> <div class="carousel-inner "> <?php $j=1; $active="active"; foreach($children as $child) { if($j==1) { echo "<div class=\"item $active\"><div class=\"row-fluid box-product\">"; $active=""; } ?> <div class="span3 product-block"><div class="product-inner"> <div class="image"> <a href="#"><img alt="Loves or pursues" src="products/image-4.jpg"></a> </div> <div class="wrap-infor"> <div class="name"><a href="#">Loves or pursues</a></div> <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div> </div> </div> </div> <?php if($j==5){ echo "</div></div>"; $j=1; } ?> <?php $j++; } echo "</div></div>"; } ?> </div> </div> </div> if you see in my code i am using variable $j to count number of products and when product reach 5 i end the two div and make $j to 1 to create another <div class="item"> but active is only once. i am also trying to close two more div at end. thanks for heloping

I've been trying to make a carousel with a repeater field that has an "active" class on the first div. I found a similar thread here but still can't get it to work. Most likely me having a dumb moment Here's my code: <div class="carousel slide <?=$page->position?>"> <h4><?=$page->heading?></h4> <!-- Carousel items --> <div class="carousel-inner"> <?php $output = ''; $class = 'item'; foreach($page->testimonials as $testimonial) { $status = ''; if ($testimonial === $page->testimonials->first()) $status .= ' active'; $class .= $status; $output .= "<div class='{$class}'> <img class='quotes' src='{$config->urls->templates}assets/img/quotes.png'> <p>{$testimonial->body}</p> <h6>{$testimonial->person_name}</h6> </div>"; } echo $output; ?> </div> </div> Any ideas where I'm going wrong?

I was looking for jQuery Carousel and I stumble upon this cool jQuery Carousel call Roundabout. It has lots of options! http://fredhq.com/projects/roundabout Found from this article: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

Just wondering if anyone knows of an alternative for a slide/carousel thingy for my homepage that has a pause on the last slide. I have used nivo-slider previously but it only does a stop on last slide. Any ideas gratefully received