Using slick to create a carousel from li elements - javascript

I'm using slick to create a carousel from list items
The structure of list is like this
<div class="slicker">
<li>
<img />
</li>
<li>
<img />
</li>
<li>
<img />
</li>
</div>
I'm unable to create a carousel of it .
The content rather appears as a normal list.
When checking the node I see the relevant classed added to the dom.
Link for slick :https://kenwheeler.github.io/slick/

Actually, Slick use div element as slide by default, but you can change it with the "slide" parameter (slide | element | 'div' | Element query to use as slide).
In your case you need to have (in your js) something like:
$('.slicker').slick({
slide: 'li'
});
You can also change your code with 'div' like "v2solutions.com" said but this change your semantics.

Could you please try <div> instead of <li>. slick seems to be working with <div> only.

Related

JQuery - setting an "active" class for image-scroll

I have content loading dynamically (using new WP_query loop in WordPress) for a jQuery carousel or image-scroll function -- where the image-scroll is a li list of images, styled to look like a strip of images.
When the image-scroll works properly, one of the images in the li tag has a class of active, which expands the image and makes it look like it's in front of the other images,
... and as the user clicks through this strip of images, the active class changes/moves to the targeted li tag, expanding that image.
What's happening is that none of the li tags are active when the page loads - since the content is dynamic through the WP loop (I didn't want all of the li tags to start with the active class, so I didn't add it to the loop),
...and so the images are just lined up in a consistent strip w/o one of the images being expanded (or having that active class).
It is only if the user happens to click on one of the images that it expands,
...but i need one of the images to be expanded (to have the class of active) before the user clicks so I need the active class added as/after the page loads.
I have tried through the jQuery code to target one of the li tags to add the active class, using filter() or closest() after the page loads, but that didn't work.
Or maybe I should write a new script to add the active class?
Any help much appreciated!
I have the abbreviated html and the jQuery function below.
_Cindy
ps as the code indicates, I also have corresponding article titles that scroll with the images, so perhaps I need to adjust the jQuery there, too.
<div class="articles-scroll">
<ul class="images-scroll">
<li><!-- I need only one of these tags to have a class of active to start -->
<a href="#">
<span class="set-image-border" style="float: none;">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
<li>
<a href="#">
<span class="set-image-border">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
</ul>
<div class="clear-float"></div>
<!-- in this section of html one of the article titles is active to coordinate with the active li image above to produce a corresponding clickable title, this works, but once again, only when user clicks on an image to begin the jQuery image-scroll function -->
<div class="wrapper">
<ul class="images-content">
<li>
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
</ul>
</div>
jQuery(".images-scroll li a").click(function() {
jQuery(this).parent().parent().find("li").removeClass("active");
// tried the following instruction as well as on next line, but no go
// jQuery(this).parent().parent().closest("li").addClass("active");
jQuery(this).parent().addClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").removeClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").eq(jQuery(this).parent().index()).addClass("active");
var step = ((-250)*(jQuery(this).parent().index()-1))-60;
//alert(step);
jQuery(this).parent().parent().css("margin-left", step+"px");
return false;
});
The reason why the code you wrote didn't work is that you have it inside a click handler, so nothing happens until you click one of the targeted elements. If you want something to happen on page load you can use $(document).ready() (can be shortened as $()) or $(window).load(). Just add the following lines below or above your existing code.
jQuery(function(){
var $listItems = jQuery('.images-scroll li');
$listItems.first().addClass('active');
// Second list item
$listItems.eq(1).addClass('active');
// Third list item
$listItems.eq(2).addClass('active');
});
Also, please note that (unless it conflicts with a different plugin), writing $ is shorter than jQuery, and it should do the same.

Positioning issue in ExpressionEngine cms

I have a positioning issue with my in expression engine. click Here On the following link I am looping elements with <div id="services-container"> I have noticed it loops fine on the first row however begins to misalign on the second row. I have made attempts to use the switch="" tag to create an individual class for each loop, see below:
{exp:channel:entries channel="services" dynamic="no" sort="asc|desc"}
<div id="services-container" class="{switch='1|2|3|4|5|6'}">
<div class="service-content">
<img src="{service_image}" alt="banner" alt="{alt}" class="service-banner">
<p>{service_head_line}</p>
{service_listed_items}
<ul class="service-credentials">
<li>{service_list_1}</li>
<li>{service_list_2}</li>
<li>{service_list_3}</li>
</ul>
<ul class="service-credentials">
<li>{service_list_4}</li>
<li>{service_list_5}</li>
<li>{service_list_6}</li>
</ul>
View related projects ยป
{/service_listed_items}
</div><!--service-content-->
</div><!--SERVICES CONTAINER-->
{/exp:channel:entries}
When i try to class these classes out in my style sheet nothing is happening. Does anyone know what i am doing wrong?
This involves ExpressionEngine but also css. Basically you are trying to create a grid with 3 items in each row, correct ?
Each of these "row" has to adopt a float containment strategy, since it only contains 3 floated items. The way I would go about it using the switch parameter:
{exp:channel:entries channel="services" dynamic="no" orderby="date" sort="asc"}
{if "{switch='one|two|three'}" == "one"}<div class="row">{/if}
<div class="item">
...code...
</div>
{if "{switch='one|two|three'}" == "three" || count == total_results}</div>{/if}
{/exp:channel:entries}
That code would include a div with a class of row every three items in that loop.
Then, if your items are floated, your rows must have some sort of float clearing strategy to contain them like overflow:hidden; or a clearfix method.

How to show the description of the elements that are listed on the sidebar on the body using show & hide javascript or JQuery?

I have 11 elements with long description of each element of them. I decided to display the elements on the sidebar and the description of each one of them will be displayed on the body directly when the user clicks on the element.
I came with a solution similar to this ONE
but the problem with this one is put the content (or description) inside the javascript code, and I want the description be on the HTML code to make it later on flexible for changes by the admin after putting the data including the description of these elements on the database instead of hard-coded style.
Therefore, how can I do that?
You can try this way
<div id="menu">
<ul>
<li id="a">item a
<div id="contentA" style="display:none">Description of item A</div>
</li>
<li id="b">item b
<div id="contentB" style="display:none">Description of item A</div>
</li>
</ul>
</div>
<div id="content"></div>
<script type="text/javascrip">
$(document).ready( function () {
$('#a').click(function() {
$('#content').html($('#contentA').html());
});
$('#b').click(function() {
$('#content').html($('#contentB').html());
});
});
<script>
I updated your example, it now uses hidden divs inside the clickable menu items, and on li click it finds the menu description and displays it.
This method does not depend on ids and degrades more gracefully (except if the client doesn't support JS but supports CSS display).
Your description is a bit unprecise, but if I get it right your could use IDs for the description text and fade them in/out with jQuery.
http://jsfiddle.net/PajFP/14/ (updated)

problems in creating a flyout/sidebar menu

I need some css and syntax help,please. Your help is warmly welcome.
I want to insert a list containing some skypelinks and behaving like a sidebar menu when I move the mouse over the image.
This is the html-code I tried to manipulate:
<a href="?USER=name">
<img src="../../name.jpg?format=raw" title="full name - skypename">
</a>
By moving the mouse over the image and the images title is skypename the two links should fade out to the right(float:right;?)
$("img[title$=\"skypename\"]").mouseover(function(){
$("<ul><li>Call</li><li>Chat</li></ul></li></ul>");
});
My aim is to let the html-code look like:
<ul>
<li>
<a href="?USER=name">
<img src="../../name.jpg?format=raw" title="full name - skypename" alt="Klick me!">
</a>
<ul>
<li>Call</li>
<li>Chat</li>
</ul>
</li>
</ul>
I created a fiddle http://jsfiddle.net/erhDJ/2/ where I tried sth. to work like a flyout menu.
In my case the first code I mentioned above would be replacing Klick me!.
By moving the mouse over it the two links should fade out to the right.
My questions:
How can I surround the first code with the second so that it looks like the third code snippet?
Do you see an easier option to create such a flyout menu?
Thank you.
I'm not too sure about what you actually want, but I can give you an example of animating menu's with some CSS and jQuery.
Sliding, animated menu when hovering link
Is this useful?

fill in space with the next element with slide animation

basically what I wanted to do is whenever an li is removed (via jquery .remove()) the set of li's slide to the space previously occupied the removed li. How can I accomplish this? Here is some code:
<li class="be-imagecontainer">
<span style="display:none">101</span>
<img src="http://localhost/thi/media/images/thumbnails/19_Koala.jpg" class="be-image" alt="19_Koala.jpg" />
<br/>
Delete
</li>
<li class="be-imagecontainer">
<span style="display:none">111</span>
<img src="http://localhost/thi/media/images/thumbnails/19_Penguins.jpg" class="be-image" alt="19_Penguins.jpg" />
<br/>
Delete
</li>
<li class="be-imagecontainer">
<span style="display:none">112</span>
<img src="http://localhost/thi/media/images/thumbnails/19_Hydrangeas.jpg" class="be-image" alt="19_Hydrangeas.jpg" />
<br/>
Delete
</li>
and here is some javascript code
$('a.be-delete').click(function(){
$(this).parent().remove();
// code to slide the rest of the divs the unoccupied space
})
the default behavior is that the rest of the list will snap to that space. How do I do that with a slide instead?
for other examples, check google wave's behavior when u close a panel. The other panel/s slide in to the previously occupied space
You can use the slideUp effect, and when it finishes, you can remove the DOM element:
$('a.be-delete').click(function(){
$(this).parent().slideUp('slow', function () {
$(this).remove(); // remove the li
});
return false;
})
You can use $(this).closest('li') instead of parent() if your anchor is nested in some other element.
Check an example with your markup here.

Categories