Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I'm having a problem with my code. I'm new in learning Meteor. I can't fix it for several hours already. I included a carousel in my practice site and it is not working the way it is supposed to be, all the pictures were just appearing. I copy pasted the carousel template from bootstrap's website and stored it inside template tag.
<template name="Carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/images/1.png" alt="">
</div>
<div class="item active">
<img src="/images/2.png" alt="">
</div>
<div class="item active">
<img src="/images/3.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</template>
This is my homelayout where I call the carousel's template
<template name="HomeLayout">
{{> yield "Navigation"}}
{{> yield "Carousel"}}
</template>
And this is my route
Router.route('/', function () {
this.layout('HomeLayout');
this.render('Navigation', {to: 'Navigation'});
this.render('Carousel', {to: 'Carousel'});
});
In addition, can I also get tips/feedback with regards to the proper coding of page routing in Meteor?
All your help is greatly appreciated. Thank you so much.
Finally,
after a couple of minutes, I found the error. I accidentally added the 'active' class in each of the item.
I don't know whether to laugh or cry. xD
Maybe I just need some sleep.
Related
I have a dynamic slider with botstrap in asp.net MVC; But I can not move it in touch.I use some sample jQuery Code for enable touch but it's important to me chose first pic of Slider automatically!
this is my HTML Code For dynamic Slider.
#model IEnumerable<MyProject.Models.DataSource.Sliders>
#if (Model.Any())
{
<section class="banner parallax-fix parallaximg">
<div class="container-fluid pr">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
#foreach (var item in Model)
{
if (item.IsFirst == true)
{
<div class="item active">
<a onclick="SliderCounter(#item.SliderID)"
href="#item.SliderLink"
target="_blank">
<img src="~/images/Slider/#item.SliderImage"
alt="#item.SliderTitle"
style="width:100%;">
</a>
</div>
}
else
{
<div class="carousel-item item">
<a onclick="SliderCounter(#item.SliderID)"
href="#item.SliderLink"
target="_blank">
<img src="~/images/Slider/#item.SliderImage"
alt="#item.SliderTitle"
style="width:100%;">
</a>
</div>
}
}
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
}
if you have another way for touchable and dynamic slider please help me!
Suppose a product has multiple images, now in the product's details page, I want to display all those images as carousel slider. Now how can I implement this in asp.net mvc. Please help me out!!
I have this set of codes -
#foreach (var item in ViewBag.Images)
{
for (int i = 0; i < ViewBag.ImgCount;)
{
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="#i"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item">
<img src="~/img/#item.Image" alt="#Model.Name" style="width:100%;">
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
i++;
break;
}
}
This is showing me all the images one by one...
Please help me out in this.. I'm new to MVC...
Your current code is generating the entire markup including the containers inside the loop. That means, if your collection has 5 items, it will generate the full HTML markup (including the containers) 5 times.
All you need to render dynamically with the loop is the div with class carousel-item and it's inner content. You also need to make sure you are setting the active css class to only one slide. ( If you set more than one slide with that css class, all will be visible)
The below code should work
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
#{
var first = true;
}
#foreach (var item in ViewBag.Images)
{
<div class="carousel-item #(first?Html.Raw("active"):Html.Raw(""))">
<img class="d-block w-100" src="#item.Image" alt="#item.Name">
</div>
first = false;
}
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
My carousel picture show works well when placed inside Site.Master, but the same markup inside the Content element of an .aspx file that uses Site.Master (without the carousel snippet) displays only the alt text for each image that it cycles through.
Environment: Win10 Pro, Visual Studio 2017 Community 15.4.4, bootstrap 3.0.0
Here is the carousel snippet:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Images-->
<div class="carousel-inner" role="listbox">
<div class="item carousel-item active">
<img src="1945_DeHavilland_Canada_DH-98_Mosquito_FBMK26.jpg" alt="Slide #1">
</div>
<div class="item carousel-item">
<img src="1969_Aerovodochody_L-29_DELFIN.jpg" alt="Slide #2">
</div>
<div class="item carousel-item">
<img src="737BahamasAir.jpg" alt="Slide #3">
</div>
</div>
<!-- Left Right Arrows -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
If the file you are using the display the carousel is inside of a subfolder, example:
/wwwroot/Content/file.aspx
Then you would have to set the image source to ../example_image.jpg (or wherever the image is stored, in this case, the image is in your web root folder.
I am starting on Bootstrap and finding it hard to figure out what the error is. The slider is appearing fine, the next and prev buttons are working, but the image isn't sliding, its staying still. The link changes when clicking the Prev or Next buttons the slide isn't changing or moving. It seems to be a very minute error, not yet able to figure out what the error is.
<div class="container">
<div class="carousel slide" data-ride="carousel" id="carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slider-to="0" class="active"></li>
<li data-target="#carousel-example" data-slider-to="1"></li>
<li data-target="#carousel-example" data-slider-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="slider/slide1.jpg" alt="Slide">
</div>
<div class="item">
<img src="slider/slide2.jpg" alt="Slide">
</div>
<div class="item">
<img src="slider/slide3.jpg" alt="Slide">
</div>
</div>
<a href="#carousel-example" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel-example" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
I am trying to create a boostrap carousel in my wordpress website.
The code is:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
The boostrap jscript libaries are all loaded correctly via https sources.
The issue is that only images from http and not https sources show. In the example above, Image one fails (HTTPS) Image two and three work (HTTP).
As my site is hosted wholly in https, it means no images show when I link to them within my theme file.
How should I fix this?
In the article "How to fix a website with blocked mixed content" explains:
If your website delivers HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default.
1st solution (ibid):
The best strategy to avoid mixed content blocking is to serve all the content as HTTPS instead of HTTP.
2nd solution: You can try to use relative URL without http: or https:. For example: //stackoverflow.com/questions/37629071
The issue was resolved by reducing the file size and compression method of the images to be used. The code remains the same, save for the links which are now relative links to the images in the themes folder.