1.26.21 • Published 9 years ago

hg-image-slider v1.26.21

Weekly downloads
1
License
-
Repository
-
Last release
9 years ago

HG-IMAGE-SLIDER

A React.Component image-slider with image-load function (blured thumbnail). This is an additional module to a custom designed CMS and won't work without that CMS.

Include the following CSS for correct behavior, you're free to adjust this to your needs:

.slider-animation-enter {
    opacity: 0.01;
}

.slider-animation-enter.slider-animation-enter-active {
    opacity: 1;
    transition: opacity 300ms ease;
}

.slider-animation-leave {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
}

.slider-animation-leave.slider-animation-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease;
    position: absolute;
    top: 0;
    left: 0;
}

.leave-left {
    animation: leave-left 300ms ease;
}

@keyframes leave-left {
    from {margin-left: 0;}
    to {margin-left: -100%;}
}

.leave-right {
    animation: leave-right 300ms ease;
}

@keyframes leave-right {
    from {margin-left: 0;}
    to {margin-left: 100%;}
}

.enter-left {
    animation: enter-left 300ms ease;
}

@keyframes enter-left {
    from {margin-left: -100%;}
    to {margin-left: 0;}
}

.enter-left {
    animation: enter-right 300ms ease;
}

@keyframes enter-right {
    from {margin-left: 100%;}
    to {margin-left: 0;}
}

.slider-button-wrapper {
    width: 10px;
    height: 10px;
    float: left;
    margin: 15px;
}

.slider-button {
    position: relative;
    width: 15px;
    height: 15px;
    background: #fff;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 300ms ease;
}

.slider-button.active {
    margin-top: -1px;
    margin-left: -1px;
    background: transparent;
    border: 2px solid #fff;
}

.slider-arrow {
    opacity: 0;
    position: absolute;
    background-color: rgba(255,255,255,0.5);
    height: 100%;
    width: 50px;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 300ms ease
}

.slider-arrow:hover {
    opacity: 1;
}

.slider-arrow.left {
    left: 0;
}

.slider-arrow.right {
    right: 0;
}
1.26.21

9 years ago

1.26.2

9 years ago

1.26.19

9 years ago

1.26.18

9 years ago

1.26.17

9 years ago

1.26.16

9 years ago

1.26.15

9 years ago

1.26.14

9 years ago

1.26.13

9 years ago

1.26.12

9 years ago

1.26.11

9 years ago

1.26.1

9 years ago

1.26.0

9 years ago

1.25.43

9 years ago

1.25.42

9 years ago

1.25.41

9 years ago

1.25.4

9 years ago

1.25.3

9 years ago

1.25.2

9 years ago

1.25.1

9 years ago

1.25.0

9 years ago

1.24.0

9 years ago

1.23.12

9 years ago

1.22.12

9 years ago

1.22.11

9 years ago

1.22.1

9 years ago

1.22.0

9 years ago

1.21.0

9 years ago

1.2.0

9 years ago

1.1.0

9 years ago

1.0.1

9 years ago

0.1.1

9 years ago

0.1.0

9 years ago

0.0.95

9 years ago

0.0.92

9 years ago

0.0.91

9 years ago

0.0.90

9 years ago

0.0.89

9 years ago

0.0.88

9 years ago

0.0.87

9 years ago

0.0.86

9 years ago

0.0.85

9 years ago

0.0.84

9 years ago

0.0.83

9 years ago

0.0.82

9 years ago

0.0.81

9 years ago

0.0.13

9 years ago

0.0.1

9 years ago