I have a blog. Here is the url you can check out --> https://dreamsummer0.blogspot.com/
The problem I have now is how can I turn the hero image into a slider? Is it possible to create a slider/carousel using Widget Image?
If not, I really don't mind manually inserting each and every image URL in the slider/carousel. I just need to know how to do it. And make sure the menu is placed on top of the carousel/slider as it is now.
If you view the blogsite in mobile or tablet (width: 980px and below), you can see all image are 100% width except the last three photos. Im using flex css for that one. How can I make it to turn 100% in width?
Any help?
Related
If possible, I am trying to create something like the below using just HTML, CSS, and Javascript. I know that the carousel below was built in React but I am not using that nor am I familiar with it. This carousel stretches across the whole screen but it looks like the picture(s) only takes up 65-75% of the width (highlighted in blue) and then the rest is a black box that never changes even when the pictures do. There are words that also overlap the black box and picture. The picture also has some gradient over it on the left side so that the black box nicely fades into the picture.
I am currently using a slideshow/carousel script from W3Schools (https://www.w3schools.com/howto/howto_js_slideshow.asp). I do not have bootstrap with this project either though I may be able to add it if needed. I tried dividing my container into columns so that one side could be 40% black and the other 60% could be the slideshow but that didn't work.
Sorry, I am still pretty new to all of this! Does anyone have suggestions on how to add a carousel kind of like this one without React (and preferably bootstrap)?
I am using Fullpage.js in my site and would like to use one image for the background for the whole site, where different parts of the image are displayed as different sections and slides are scrolled. So far I have managed to get different parts of the image showing for sections by adding:
<div class="fullpage">
at the top of the body with corresponding CSS:
.fullpage {
background-image: url(../images/background_image.jpg);
background-size: cover;
}
Is there any way to get the image to move sideways as slides are displayed.
Here's a jsfiddle of what I've got so far.
In the end I decided to go a different route and convert the image into tiles. The image tiles are then assigned to the correct slide or section. This allows the image to continue from each slide or section without having to load the whole image at once.
Yep! You'll need to hook into that slider gallery's events.
What plugin are you using? Or did you write it yourself?
Either way, most plugin slide galleries have events like "onSlideStart" or things like that, which you can then use to update your background.
I'd start by writing a script, and setting onSlideStart to a function that calculates what slide the slider is on. Then you simply set your background position (or rather, animate it) to the proper x-value based on what slide you're on (you can figure out the math yourself, yeah?)
Hope this helps! :)
So I have a site I am working on and I want it to load to a full background video with the title over it. However, I also want to the user to beable to scroll to other full screen sections of a page. How do I get this to work.
Here is a Codepen link
http://codepen.io/anon/pen/rskjF
The about div is the next section I want to make. It is supposed to be(well every section is) 100% height and width. It seems from the look of some sites, you can achieve this with clever positioning.
I've used Syd Lawrence's jquery.videoBG with good success. Just use this example to make your hero div have a video background. Then write the rest of your page below that div.
(Bonus tip: If you don't already know about using 'vh' and 'vw' as CSS units you may want to look into them. Example:.row{height: 100vh;})
I am trying to implement a twitter bootstrap carousel. Except, I need to put content (containers, rows, spans, copy) in the slides rather than a big image. But, I do have a big image (1366x450) to display as the background of each slide, scalable/responsively.
I can't quite find a way to do this so that the background image scales correctly and the slide displays at the responsive sizes needed. I need quite a bit of padding top and bottom of the content.
Any ideas where to start?
Okay, so I'm working on a project using JavaScript and the basic UI we want to be a very large background image, and when you select the navigation menu items it propels you to a section on that large image.
I've tried finding documentation on Viewports and trying to figure out how Map applications function but have had very very minimal success.
It would basically be a Google map without the user being able to slide it. How in the world would I begin to approach this?
You can set the background-image property in CSS and use javascript to change the background-position.