https://github.com/emmelleppi/miranda-slider

https://github.com/emmelleppi/miranda-slider

Last synced: 2 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/emmelleppi/miranda-slider
• Owner: emmelleppi
• Created: 2021-03-31T09:25:42.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-09-01T00:14:57.000Z (about 3 years ago)
• Last Synced: 2023-03-05T22:43:48.889Z (over 1 year ago)
• Language: JavaScript
• Size: 2.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# miranda-slider

## integration

Add this to your custom code

```html

```

Then in your designer section you have to create a structure like this

```html





  

  

  



```


Where `data-slider-images` and `id` attributes must have the same value. That's because the slider script took the image references from the children of `
` and then it creates the slider into the `
` element.

In this way you can visualize your images into the webflow designer without strange solutions or fallback.


## CSS

```css

// This is the main wrapper

.slide-wrapper-relative {

  width: calc(75vw);

  height: calc(50vh);

}

// This is the direct child of the `slide-wrapper-relative` element

// as you can see it has pretty much the same size of the father, you can remove the margin if you want

.slide-wrapper-absolute {

  width: calc(75vw - 2rem);

  height: calc(50vh - 2rem);

  margin: 1rem;

}

// this style is applied to the image

.slide-image {

  width: 100%;

  height: 100%;

}

// this style is applied to the custom cursor

.slider-cursor {

  width: 1rem;

  height: 1rem;

  border: 1px solid white;

  background: white;

  border-radius: 100%;

}

```