How can I make working links prev and next arrow slide links

[Qurus]

 <div class="col-md-6">

            <div class="carousel slide carousel-v1" id="myCarousel">

                <div class="carousel-inner">
                    <?php $x=1; foreach($page->images as $image): $y=$x++; ?>
                    <div class="item<?php if($y==1) { echo 'active'; } ?>">

                        <img class="img-responsive"
                             src="<?php echo $image->url; ?>"
                              />
                        <div class="carousel-caption">
                            <p><?php echo $image->description; ?></p>
                        </div>

                    </div>

                    <?php endforeach; ?>
                </div>

                <div class="carousel-arrow">
                    <a data-slide="prev" href="<?php echo $image->url; ?>#myCarousel" class="left carousel-control">
                        <i class="fa fa-angle-left"></i>
                    </a>
                    <a data-slide="next" href="<?php echo $image->url; ?>#myCarousel" class="right carousel-control">
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>

            </div>

Hi I am making a single portfolio page. Added carousel slider. But couldn't make prev and next button work with images. Can anyone tell me please  how to make this working like normal slide html version ? Like this did not work prev and next arrows.

Thanks .

[diogo]

Use the getPrev() and getNext() methods:

<?php echo $page->images->getPrev($image)->url; ?>

--

It's better if you keep $page->images in a variable before the foreach, and call the variable instead of $page->images all the time.

$images = $page->images;
foreach($images as $image):

// and later, inside the href:

echo $images->getPrev($image)->url

[Qurus]

Hi diogo, Thanks for your reply. Really appreciated. 

<div class="carousel-arrow">
                    <a data-slide="prev" href="<?php echo $page->images->getPrev($image)->url; ?>#myCarousel" class="left carousel-control">
                        <i class="fa fa-angle-left"></i>
                    </a>
                    <a data-slide="next" href="<?php echo $page->images->getNext($image)->url; ?>#myCarousel" class="right carousel-control">
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>

            </div>

I have added like this. But I have still issues. Could you help me please with that? 

[kongondo]

As it states in the methods' docs that Diogo linked to:

Given an item already in the WireArray, return the item that comes after it in this WireArray or NULL if no match.

You items need to be in a WireArray first...

[diogo]

You items need to be in a WireArray first...

If the code is the same as in the first post, they are already. The problem must be another. 

[kongondo]

If the code is the same as in the first post, they are already. The problem must be another. 

It seems different? This is what Qurus has...but of course, I don't know if anything before that has changed

<?php echo $page->images->getPrev($image)->url; ?>

Edited February 21, 2015 by kongondo

[Qurus]

Can you recommend another slider. I think I am lost here with this next and prev.

[kongondo]

You said you were having issues...what issues are those?

[Qurus]

Hi kongondo, If it's possible can you show me exact code for this slider arrow links? I think, I did not quite understand. Sorry for being very noob.

Thanks .

[diogo]

As it states in the methods' docs that Diogo linked to:

"Given an item already in the WireArray, return the item that comes after it in this WireArray or NULL if no match."

You items need to be in a WireArray first...

It seems different? This is what Qurus has...but of course, I don't know if anything before that has changed

<?php echo $page->images->getPrev($image)->url; ?>

So, if the field is correctly set and populated, $page->images is the WireArray and $image the item, no? 

[kongondo]

So, if the field is correctly set and populated, $page->images is the WireArray and $image the item, no? 

Yes...as long as $image has been defined somewhere....otherwise it will throw an error (undefined variable $image), no?

[diogo]

oh, right... I didn't notice that this code is outside the foreach. Sorry Kongondo.

Thinking of it, this carrousel code makes less sense to me. Qurus, can you tell us what carrousel is that one?

[Qurus]

Hi Diego, thats owl carousel. 

[diogo]

As I thought, you don't need to have the arrows on your markup, they should be added dynamically by Owl, See here http://owlgraphic.com/owlcarousel/#how-to
 
Also notice:

Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

 
You don't seem to be using it in your code.

[Qurus]

My html version working. 

            <!-- Carousel -->
            <div class="col-md-6">
                <div class="carousel slide carousel-v1" id="myCarousel">
                    <div class="carousel-inner">
                        <div class="item active">
                            <img alt="" src="assets/img/main/12.jpg">
                            <div class="carousel-caption">
                                <p>Facilisis odio, dapibus ac justo acilisis gestinas.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img alt="" src="assets/img/main/13.jpg">
                            <div class="carousel-caption">
                                <p>Cras justo odio, dapibus ac facilisis into egestas.</p>
                            </div>
                            </div>
                        <div class="item">
                            <img alt="" src="assets/img/main/11.jpg">
                            <div class="carousel-caption">
                                <p>Justo cras odio apibus ac afilisis lingestas de.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="carousel-arrow">
                        <a data-slide="prev" href="portfolio_item1.html#myCarousel" class="left carousel-control">
                            <i class="fa fa-angle-left"></i>
                        </a>
                        <a data-slide="next" href="portfolio_item1.html#myCarousel" class="right carousel-control">
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- End Carousel -->

[diogo]

Doesn't seem to me that knowing the previous and next items is necessary to achieve that markup. look at the href of the prev and next links: "portfolio_item1.html#myCarousel". This seems like a link to the project being shown, and whatever the problem is, I bet it is not related to the href of those links.

Have a good look at the markup that is being generated by your code (view source in browser) and compare it with the html you just posted to see what's going wrong.

[kongondo]

If only Qurus could tell us 'what is not working'....For all we know, this could be a javascript issue. What Diogo said - the next/prev in those demos are all being controlled client-side....from what I can tell...

[Qurus]

Hi, I was checking and have really script conflict issues. Can you tell me please how can I call every pages script and css separately ? Because my template is _header.php and _footer.php prependTemplateFile and appendTemplateFile from config.php. 

[diogo]

That depends a lot of how you are structuring your templates. scripts and CSS should go on the head and before the closing body tag, but this has to do more with markup than PW itself.

The example on the Owl docs has everything on the head

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>

<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

Make sure you call jQuery before calling the Owl script, and follow these examples to adapt the css and script links to point to PW templates folder

https://github.com/ryancramerdesign/ProcessWire/blob/master/site-beginner/templates/_head.php#L8

https://github.com/ryancramerdesign/ProcessWire/blob/master/site-classic/templates/head.inc#L32

https://github.com/ryancramerdesign/ProcessWire/blob/master/site-default/templates/_main.php#L39

[Qurus]

Mine like this in _header.php I use css files

  <!-- CSS Global Compulsory -->
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/css/style.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/css/pages/page_pricing.css">
    <!-- CSS Implementing Plugins -->
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/plugins/line-icons/line-icons.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/plugins/sky-forms/version-2.0.1/css/custom-sky-forms.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/plugins/horizontal-parallax/css/horizontal-parallax.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/plugins/flexslider/flexslider.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/plugins/owl-carousel/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/plugins/bxslider/jquery.bxslider.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/plugins/fancybox/source/jquery.fancybox.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/css/pages/portfolio-v1.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/css/pages/page_contact.css">
    <!-- CSS Theme -->
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/css/theme-colors/brown.css" id="style_color">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/css/theme-skins/dark.css">

    <!-- CSS Customization -->
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/css/custom.css">
    
</head>

In _footer.php I use script files.

      	<!-- JS Global Compulsory -->
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script type="text/javascript" src="<?php echo $config->urls->templates?>assets/plugins/jquery/jquery-migrate.min.js"></script>
		<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
		<!-- JS Implementing Plugins -->
       <script type="text/javascript" src="<?php echo $config->urls->templates?>assets/plugins/back-to-top.js"></script>
       <script type="text/javascript" src="<?php echo $config->urls->templates?>assets/plugins/flexslider/jquery.flexslider-min.js"></script>
       <script type="text/javascript" src="<?php echo $config->urls->templates?>assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>

		<!-- JS Customization -->
		<script type="text/javascript" src="<?php echo $config->urls->templates?>assets/js/custom.js"></script>
		<!-- JS Page Level -->
		<script type="text/javascript" src="<?php echo $config->urls->templates?>assets/js/app.js"></script>
		<script type="text/javascript" src="<?php echo $config->urls->templates?>assets/js/plugins/fancy-box.js"></script>
		<script type="text/javascript" src="<?php echo $config->urls->templates?>assets/js/plugins/revolution-slider.js"></script>
          <script type="text/javascript" src="<?php echo $config->urls->templates?>assets/plugins/horizontal-parallax/js/sequence.jquery-min.js"></script>
            <script type="text/javascript" src="<?php echo $config->urls->templates?>assets/plugins/horizontal-parallax/js/horizontal-parallax.js"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>assets/js/pages/page_contact_advanced.js"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>assets/plugins/gmap/gmap.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        App.init();
        App.initSliders();
        ContactPage.initMap();
        PageContactForm.initPageContactForm();
        StyleSwitcher.initStyleSwitcher();
    });
</script>
            <!--[if lt IE 9]>
            <script src="assets/plugins/respond.js"></script>
            <script src="assets/plugins/html5shiv.js"></script>
            <script src="assets/js/plugins/placeholder-IE-fixes.js"></script>
            <![endif]-->

</body>
</html>

Is there a way I can put page template separately js and css files?

I was checking with firebug trying to read from every page scripts.