WordPress.org

Ready to get started?Download WordPress

Forums

JJ NextGen JQuery Carousel
Transparent Background (10 posts)

  1. rpmonteiro
    Member
    Posted 2 years ago #

    Is it possible to remove the background color and the border, so I can only have the images and the |next|previous| arrows?

    Thanks in advance! =)

    http://wordpress.org/extend/plugins/jj-nextgen-jquery-carousel/

  2. rpmonteiro
    Member
    Posted 2 years ago #

    Please someone help! :(

  3. kg69design
    Member
    Posted 2 years ago #

    It is very simple if you are familiar with CSS. So, just open CSS file of your wordpress theme and add some styles to it:

    .jcarousel-skin-tango .jcarousel-container {
    	background: none;
    	border: none;
    }

    That is all. Also you can do your own style for every element, just read this. You can add your own arrows and so on.

    If you still have some questions, write to me:
    My design project My email: kg69design@gmail.com

  4. dexter_ade
    Member
    Posted 2 years ago #

    Hi all does anyone know how I can make the rollover as seen in this example?

    http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html

    I just approached the effect when the mouse pointer, please help

  5. kg69design
    Member
    Posted 2 years ago #

    Can you explain more? The rollover on image or on buttons?

  6. dexter_ade
    Member
    Posted 2 years ago #

    Hi kg69design The rollover on images, please help me, Thanks you.

  7. kg69design
    Member
    Posted 2 years ago #

    You can do it with css, something like this (add this code to your css file):

    li.jcarousel-item img {
    	transition: opacity 0.5s;
    	-moz-transition: opacity 0.5s;
    	-webkit-transition: opacity 0.5s;
    	-o-transition: opacity 0.5s;
    	opacity: 1;
    }
    li.jcarousel-item img:hover {
    	opacity: 0.6;
    	cursor: pointer;
    }

    Or if you want the same effect, try this code:

    li.jcarousel-item {
    	border: 1px solid #fff;
    }
    li.jcarousel-item:hover {
    	border-color: #808080;
    	cursor: pointer;
    }

    If something don't work, give a link to your project.

  8. imikedesigns
    Member
    Posted 2 years ago #

    .jcarousel-item {
        border: 1px solid #FFFFFF;
        height: 75px;
        width: 75px;
    }
    .jcarousel-item:hover {
        border: 1px solid #808080;
    }

    That's the css from the demo.

  9. dexter_ade
    Member
    Posted 2 years ago #

    hi kg69design I did the example below and stay cool also works very well, I did it up as localhost to my server it will share with you. thanks very much, God bless you

    img {li.jcarousel-item
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -or-transition: opacity 0.5s;
    opacity: 1;
    }
    li.jcarousel-item img: hover {
    opacity: 0.6;
    cursor: pointer;
    }

  10. dexter_ade
    Member
    Posted 2 years ago #

    Hi imikedesigns thanks for you help, God bless you

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic