Search the Community
Showing results for tags 'slider'.
Found 8 results
-
Hi Guys Since I nearly always needed a Slider for my websites, I've searched for a Slider which I could use for every Project or better said for different scenarios. So It had to be a rich-feature, responsive and customizable Slider which could be adapted/changed hassle-free to different needs of customers. In the end I found this nice jQuery Slider Plugin called "Slider Pro" (don't worry, it is MIT licensed ) which I think fulfills all expectations above and it also works very well for me. Perhaps it is also useful for you. Github Link: https://github.com/bqworks/slider-pro/ PS: What kind of Sliders are you using for your projects? Do you build your Sliders from scratch? Greetings Nukro
-
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?
-
Hi I have a existing project in Foundation 6 with some jQuery plugins, and I'm try to move to Processwire, but it shows a Revolution Slider Plugin error when I open index page . How can I solve this? Thanks!
-
Hello again. Thought i share my way of creating sliders in my ProcessWire websites, by using the images field type and some HTML, JavaScript, CSS and a pinch of love. Step One: Go to http://flickity.metafizzy.co/ and download Flickity slider. They also have a CDN option for thoose who prefere that. Also have the page handy cause it has alot of usefull info for configuring the slider and such. Note: In my example i use jQuery to initialize Flickity but you can use it without, see the website for more info. So you need to load jQuery before flickity in the header section for my example to work. Step Two: Here is an example of how you could write some code and HTML for your template file where the slider should render. This code assumes your images field is named images. <div class="slider-container"> <?PHP /* check if there is any images to display */ if(count($page->images) > 0) { /* render out the images and resize to 700 pixel width */ foreach($page->images AS $key => $image) { echo('<img src="' . $image->width(700)->url . '" class="slider-container-item" alt="' . $image->description . '">'); } } else { echo('<p>Houston we have a problem...there are no images to see here...</p>'); } ?> </div> Also lets put together some simple CSS for our container and items. Alter it to your own needs and preference. For the Flickitys sliders default CSS and configuring see the website. .slider-container { position: relative; display: block; overflow: hidden; width: 100%; max-width: 700px; padding: 0; margin-bottom: 15px; clear: both; } .slider-container-item { position: relative; display: block; width: 100%; height: auto; max-width: 700px; } Step Three: Put the default CSS and also Flickitys JS files and load jQuery before Flickity in the header of your site so that flickity works as intended. Or use the CDN option mentioned on the flickity website. <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/jquery.js"></script> <script src="/path/to/flickity.pkgd.min.js"></script> Don´t forget to put the Flickity JavaScript initalization code at the bottom of the template file. For all the Options and configuration see the website: http://flickity.metafizzy.co/ In the example code below i use just a few of the many options. <script type="text/javascript"> /* initiate Flickity Slider JS */ $(document).ready(function(e){ $('.slider-container').flickity({ // options cellSelector: '.slider-container-item', cellAlign: 'center', imagesLoaded: true, percentPosition: true, contain: true }); }); </script> Note: This is my prefered way of doing it. But there are alternative ways to initialize Flickity if you read the info on the website. This should be enough to get you started. And with a little imagination i think you could see the potential. Good luck with all your Slider making dreams
-
Hi! This is my first posting at this forum and I am on my first PW website. The CMS looks pretty cool and I like its approach of handling data. Well, there is just one thing I don't understand or perhaps that way is new to me. The assets management. My website (about 100 pages) has a slider with 3 images in its header. As I understand I have to attach an image always to a particular page. If I want to use the same image on another page, I have to upload it again. Right? I can't access it from a field on another page (beside access via TinyMCE). Thanks for help! Sebastian
-
I made an image field name slider1 with max of 3 images. uploaded the 3 images for my slider to use on my slider in my homepage. but how do i call it one by one? for ex. ignore the code for my first item it doesnt work but how do i make my slider work? have 3 images uploded on a single image field called slider1 how do i call each of them , what is the code to be put on img src for each item
-
Hey everyone, I'm trying to build a single-page portfolio on ProcessWire, I think I've got the header and footer right, but I'm having doubts on how to setup the portfolio area. I was hoping you guys could give me a hand since I'm very used to ExpressionEngine designer-friendly tags. My english is not very good so I created an image to show what I'm trying to do: http://i46.tinypic.com/23r1tl3.png So I'm trying to figure out is: -how to create the slider for every project I add -how to create tags or categories for every project The date I suppose I should use the datepicker field, right? And title and description are basic text fields...
-
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
