I've incorporated the following automatic slideshow into a webpage that I'm developing...
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
...but would like the ability to manually move to the next slide or go back as shown here...
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
W3schools provide both types of slideshows (manual and automatic) but not one where the manual and automatic features are combined. I've tried incorporating the CSS and JS of one in to the other but can't get it to work - presumably because both JS scripts are calling on the same functions. Can anyone help?
Add two links to HTML :
<a id="prev" href="#" >Prev</a>
<a id="next" href="#" >Next</a>
JS:
$("#next").click(function(){
$('#slideshow > div:first-child')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
});
$("#prev").click(function(){
$('#slideshow > div:first-child')
.fadeOut(1000)
$('#slideshow > div:last-child')
.prependTo('#slideshow')
.fadeOut();
$('#slideshow > div:first-child').fadeIn();
});
Related
I would like to know if it's possible to make a temporary void link in Ember <LinkTo #route=""> like HTML <a href="#">, thanks for helping.
While <LinkTo> provides some interesting features when you use it with a route (navigation without reloading, active route recognizing, query param and model passing). You don't need to use it to create a link. You can use <a href="#"> directly in a template with no ill effects if it is what you need.
I have a div with a certain id
<div id="services">
Then I try to link to it using Django templates
<a href="{% url 'homepage' %}#services">
But it only works if I'm in the same page (App)
Is there a way to work around this ?
I found out what the problem was. I had a script that does smooth scrolling and it had "event.preventDefault();" in it. as I removed that it worked.
I'm trying to create a carousel and I want it to be configurable from the Experience Editor. By configurable I meant that it's possible to edit the image, text AND add/or remove slides.
The first time I create the carousel I can add/remove slides but no after saving it and opening it again, after rendering the carousel I can't remove just one slide because they all are part of the same placeholder (I can continue adding new slides and removing the new ones but not the old ones).
I have Carousel.cshtml and CarouselSlide.cshtml and the code look like:
Carousel.cshtml
<div class="carousel">
#foreach (Item slide in Model.Item.Children)
{
#Html.Action("CarouselSlide", "MediaFeature", new { model = slide });
}
#Html.Sitecore().DynamicPlaceholder("slides")
</div>
CarouselSlide.cshtml
<div class="carousel-slide">
<div class="carousel-slide-content">
#Html.Sitecore().BeginField(....)
<div class="background-image">
.....
</div>
<div class="text-container">
....
</div>
#Html.Sitecore().EndField()
</div>
</div>
So far, the issue looks like is related with the placeholders. Any ideas about how to render DynamicPlaceholders?
EDIT
"slides" placeholder is configured to allow only CarouselSlide components
Remove the foreach loop. It is unnecessary. When Sitecore renders the placeholder it renders the previously added slides for you. When in edit mode, it also renders the container that allows you to add additional components.
Using a dynamic placeholder as you have will allow you to have multiple Carousel components on a page. Or more precisely, multiple components containing a placeholder with the key "slides". It is most likely not causing the problems you are seeing with your slides.
Update - additional info requested by OP
It looks like what you have done is mix two different styles of development. In one, you are explicitly rendering the children of the carousel item as slides. In the second you are relying on Sitecore's presentation engine to dynamically render components into a placeholder that could be using data sources from somewhere else in the tree. You need to pick one or the other, but the second approach is generally preferred.
To use the second approach, you would simply remove the foreach loop so that your Carousel view looks like this:
<div class="carousel">
#Html.Sitecore().DynamicPlaceholder("slides")
</div>
If you decide to go with the first approach, you would remove the placeholder and then add Custom Experience Buttons to allow you to insert and sort child items under your carousel item.
With either approach, you may find that page editor does not play all that well with your Carousel javascript. The most common workaround to this problem is to render the carousel as a flat list in page editor mode.
Lets say I have html view like <div ng-controler="contr">....</div> and a js controler. Supposed that i want to use this view on bottom left and right top of my main page, in the center of one of the sub pages and so on... What are my best options of reusage? I saw that i can inject the whole html into a string and call "compile" like this but this does not seem "elegant"
Put it in a spearate html file, or add to the template cache, and include it with the ng-include directive. I'll automatically create a new scope.
<ng-include src="'template.html'"></ng-include>
<ng-include src="'template.html'"></ng-include>
<script type="text/ng-template" id="template.html">
<div ng-controler="contr">....</div>
</script>
So yeah, I have this on the page:
<div class="addthis_toolbox addthis_default_style " id="divAddThis" runat="server">
<a class="addthis_button_facebook_like" style="opacity:1;" <%="fb:like:layout='button_count'"%>></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
But after clicking the like button (and closing the bubble), a <span> just inside the <fb:like ...> element dynamically gets a width of 450px, breaking the layout of AddThis (the buttons are all inline).
Recommendations?
Seems like it might be a bug on Facebook's side of things. I've seen a few reports pop up this week and I'm experiencing it myself as well.
Here is a link to one of the bug reports for it that says that Facebook is looking into it:
Facebook Bug Report
Hopefully we'll have an answer soon.