I tried this temporarily but I want to permanently remove the animation:
*I am using the carousel to display blocks of text only no images
<Carousel interval={10000000}>
<Carousel.Item>
<h3>Text Content</h3>
</Carousel.Item>
</Carousel>
Related
I can't seem to increase the size of the images in my carousel. I'd like the images to be larger. No matter what the size of the source image, they all appear the same size when I run the carousel. I suspect I need to increase the size of the viewport, but can't figure out how to do that.
function Work() {
return (
<Carousel fade indicators={false} controls={false} pause={false}>
<Carousel.Item interval={5000}>
<img
className="d-block w-100"
src={newsBlur}
alt="News Flash blurred"
/>
<Carousel.Caption style={styles.carouselCaption}>
<h3>
News Flash gathers news based on the user's
news category preferences.
</h3>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
}
It turns out my images were actually displaying full screen, which is the default setting for the react-bootstrap carousel. My images were over a transparent background making them appear to only cover part of the screen. When I resized the image, the component just stretched it to fill the full screen, so it didn't appear to do anything. I needed to re-create my images with a different ratio of transparent back ground and viewable image.
Iam new to css and html5.
I`m using bxslider and would like to have controls (arrow nav) outside the slider div. I made it according to http://bxslider.com/examples/custom-next-prev-selectors but I do not like it.
How to replace "onward" with an arrow image (jpg)?
How can I move my arrow image to the edge of the slider? I don't want it in the center but aside the slider.
http://www.pulik.edl.pl/WWWMG/foto.html
Why you don't use the controls of the own bxslider and change its css?
Then with left/right you can work around to make the controls to be on the edge of the slider.
Else, if you really want to use the custom controls, make a container around the controls and the slider. Then you can easily do the trick, if the container was made properly.
To move the direction controls outside of the content, you'll need to override the bxslider css in your own css file:
.bx-prev {
margin-left: -70px;
}
.bx-next {
margin-right: -70px;
}
This might cause a further issue where the controls are outside ALL of your content and not even visible. In that case you should wrap the whole slider control inside another div that has left and right padding.
What a great responsive menu might I first of all say. I'd like to take this a little further by adding a small logo into the slide out.
At the moment I'm doing this by firstly adding a good deal of padding to this element:
.mm-menu > .mm-list {padding:160px 0 0 0;}
Then I'm using the menu div created I'm inserting with jquery a div which holds the logo as a background image:
$("#mobile").prepend("<div class='logo'></div>");
CSS for this:
#mobile .logo {width:80%; height:124px; max-height:124px; z-index:1000; position:absolute; top:10px; left:50%; margin-left:-40%; background:url(../Images/mob_logo_slide.png) top center no-repeat;}
This all looks great until you have a menu that is a little longer than the users screen, so then when you scroll the first menu items such as Home, About Us ect all overlay onto the jQuery inserted logo.
I need a way of making the 160 padding being the top of the menu so it does not scroll over it.
Thanks in advance.
I've done custom image uploader for ckeditor 3.6.4. I insert an image and button "center" for paragraphs dont work for image. In fckeditor I could align image with this button. How to make that work either in cekdtior.
http://imageshack.us/photo/my-images/17/66892061.jpg/
This is because the image must be wrapped in a (psuedo)block element with text-align: center; to be centered. There's no other (valid) way to center the image so the Center button is disabled for images. I fact, what you see in FCK was totally wrong, as for such case:
<p>Foo<img src="path" />Bar</p>
The entire paragraph was centered:
<p style="text-align: center;">Foo<img src="path" />Bar</p>
To sum up: you have to do this manually.
I have a div element which acts as a global contianer for my webpage, I also have a div element inside this which I use as a curtain i.e. when it is activated it covers the whole page in a dark semi transparent layer (just like a lightbox) so the page is essentially deactivated and a warning dialog or picture box, etc, etc can be displayed on top.
I can achieve this efect and functionality easily with javascript but I wanted to know whether it could be achieved purely with css animations?
<div id='globalCon'>
<div id='curtain' class='enabled'></div>
<div id='contentA'></div>
<div id='contentB'></div>
...
</div>
so when curtain is not active it should have opacity 0 and prefferably be display:none; to keep it out of the way. Then when it is activated it should have display:block and opacity animate to 0.8. Then when it is deactivated, opacity should animate back to 0 and then it should be set back to display:none;
Like I say, I can do this easily with javascript, I just want to know if and how it can be done with css only?
You can use:
animation-fill-mode: none/backwards/forwards/both;
The ‘animation-fill-mode’ property defines what values are applied by
the animation outside the time it is executing
From the Spec.